<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: lightblue;
}
div.box{
/*position: absolute;*/
width: 200px;
height: 300px;
/*left: 600px;
top: 100px;*/
margin: 100px auto;

transform-style: preserve-3d;

animation: rotateit 10s linear infinite;
}
.box div{
width: 200px;
height: 300px;
position: absolute;
border: 2px solid lightcoral;
top: 0;
left: 0;
background: url(img/test.jpg);
background-size: 100% 100%;
}
/*先转然后移出*/
.box div:nth-child(1){
transform: rotateY(30deg) translateZ(400px);
}
.box div:nth-child(2){
transform: rotateY(60deg) translateZ(500px);
}
.box div:nth-child(3){
transform: rotateY(90deg) translateZ(400px);
}
.box div:nth-child(4){
transform: rotateY(120deg) translateZ(500px);
}


.box div:nth-child(5){
transform: rotateY(150deg) translateZ(400px);
}
.box div:nth-child(6){
transform: rotateY(180deg) translateZ(500px);
}
.box div:nth-child(7){
transform: rotateY(210deg) translateZ(400px);
}
.box div:nth-child(8){
transform: rotateY(240deg) translateZ(500px);
}

.box div:nth-child(9){
transform: rotateY(270deg) translateZ(400px);
}
.box div:nth-child(10){
transform: rotateY(300deg) translateZ(500px);
}
.box div:nth-child(11){
transform: rotateY(330deg) translateZ(400px);
}
.box div:nth-child(12){
transform: rotateY(360deg) translateZ(500px);
}

.box div:hover{
transform: rotateY(360deg) translateZ(600px);
/*transform: rotateY(360deg);*/
width: 800px;
height: 1200px;
position: absolute;
top: -200px;
/*left: -600px;*/
/*margin: 100px auto;*/
animation: move 10s linear infinite;
}


@keyframes rotateit{
0%{
transform: rotateX(5deg) rotateY(0deg);
}
50%{
transform: rotateX(-5deg) rotateY(180deg);
}
100%{
transform: rotateX(5deg) rotateY(360deg);
}
}
/*@keyframes move{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}*/
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

纯css3图片旋转展示的更多相关文章

  1. jQuery图片旋转展示收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 纯css3实现旋转的太极图

    效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...

  3. 纯CSS3图片反转

    一些简单实用的小技巧,CSS3对图片进行翻转,显示另一面的文字,或者图片效果,那么具体怎样去做呢?一起来看看吧. 在CSS3中,可以使用transform-style: preserve-3d进行3d ...

  4. CSS3图片旋转特效

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  5. css3图片旋转

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  6. html5+css3图片旋转特效

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  7. CSS3 图片旋转

    .nav_all { position:relative; z-index:; width:172px; display:inline; ; } .nav_all b { display:block; ...

  8. 精选 5 个漂亮的 CSS3 图片滑过特效

    这篇文章将为大家分享5款漂亮的CSS3图片滑过特效,比如滑过后显示图片的详细文字介绍,又比如滑过后对图片进行淡入淡出的效果等等.让我们一起来看看,喜欢的朋友赶紧收藏. 1.非常酷的CSS3图片说明效果 ...

  9. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

随机推荐

  1. SQL Server中提前找到隐式转换提升性能的办法

        http://www.cnblogs.com/shanksgao/p/4254942.html 高兄这篇文章很好的谈论了由于数据隐式转换造成执行计划不准确,从而造成了死锁.那如果在事情出现之前 ...

  2. Oracle 11.2.0.4 RAC安装最新PSU补丁

    环境:两节点RAC(RHEL 6.4 + GI 11.2.0.4 + Oracle 11.2.0.4) 需求:安装最新PSU补丁11.2.0.4.7 1.下载补丁和最新OPatch 2.检查数据库当前 ...

  3. 自己手写的自动完成js类

    在web开发中,为了提高用户体验,会经常用到输入框的自动完成功能,不仅帮助用户进行快速输入,最重要的是帮助那些“记不全要输入什么”的用户进行选择.这个功能有很多插件已经实现了,为了适应项目的特殊需求, ...

  4. 关系数据库SQL之可编程性触发器

    前言 前面关系数据库SQL之可编程性函数(用户自定义函数)一文提到关系型数据库提供了可编程性的函数.存储过程.事务.触发器及游标,前文已介绍了函数.存储过程.事务,本文来介绍一下触发器的使用.(还是以 ...

  5. [修正] Firemonkey Android 显示 Emoji (颜文字)

    问题:在 Android 平台下,显示 Emoji 文字,无法显示彩色(皆为黑色),例如 Edit 控件,即使将 Edit.ControlType = Platform 设为平台原生控件,还是没用(真 ...

  6. 微信小程序demo理解

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Verdana } p.p2 { margin: 0.0px 0.0px 0.0px 0.0p ...

  7. C - NP-Hard Problem（二分图判定-染色法）

    C - NP-Hard Problem Crawling in process... Crawling failed Time Limit:2000MS     Memory Limit:262144 ...

  8. hdu-2444-二分图判定+最大分配

    The Accomodation of Students Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ( ...

  9. 如何解决例如i++的线程不安全性

    AtomicBoolean.AtomicInteger.AtomicLong.AtomicReference 各种原子性关键字,可以解决比如i++的线程不安全性的因素

  10. glibc 各版本发布时间以及内核默认glibc版本

    最近有些软件要求glibc 2.14+,centos 6.x自带的版本是2.12的,特查了下glibc 各版本发布时间以及与对应的内核,如下: Complete glibc release histo ...