CSS3+jquery实现图片万花筒3D旋转动画特效

一需求样式：

二代码示意：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3图片万花筒3D旋转动画特效</title>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<style>*{padding: 0;margin: 0;}img{width:200px;height: 300px;}body{ background-color: #fff; }/* 动画  沿着X轴倾斜-15deg，动画沿着Y轴旋转 */@keyframes fn{0% {transform:rotateX(-15deg) rotateY(0deg);}100%{transform:rotateX(-15deg) rotateY(360deg);}}@-moz-keyframes fn{0% {transform:rotateX(-15deg) rotateY(0deg);}100%{transform:rotateX(-15deg) rotateY(360deg);}}@-ms-keyframes fn{0% {transform:rotateX(-15deg) rotateY(0deg);}100%{transform:rotateX(-15deg) rotateY(360deg);}}@-webkit-keyframes fn{0% {transform:rotateX(-15deg) rotateY(0deg);}100%{transform:rotateX(-15deg) rotateY(360deg);}}/* 动画加给了父盒子 */.box{               width:200px;height:300px;position:relative;margin:auto;margin-top:150px;transform-style:preserve-3d;transform:rotateX(-10deg);animation: fn 10s;animation-iteration-count: infinite;animation-timing-function: linear;position: relative}/* 鼠标滑过，停止旋转*/.box:hover{animation-play-state: paused;}.box>div{width:200px;height:300px;position: absolute;left:0;top:0;}
</style></head>
<body>
<div class="box"><!-- 图片 --><div ><img src="img/1.png" ></div><div ><img src="img/2.png"></div><div ><img src="img/3.png"></div><div ><img src="img/4.png"></div><div><img src="img/5.png"></div><div ><img src="img/6.png"></div><div><img src="img/7.png"></div><div ><img src="img/8.png"></div><div><img src="img/9.png" ></div>
</div>
<script>$(function(){var imgL=$(".box div").size();console.log(imgL)var deg=360/(imgL-1);//注意这边是遍历，别忘记i$(".box div").each(function(i){$(this).css({// <!--translateZ 定义2d旋转沿着z轴-->"transform":"rotateY("+i*deg+"deg) translateZ(275px)"    });// <!--防止图片被拖拽-->$(this).attr('ondragstart','return false');});})
</script>
</div>
</body>
</html>

三知识点总结：

1.transform-style:preserve-3d;

transform-style: flat | preserve-3d

其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。

也就是说，如果对一个元素设置了transform-style的值为flat，则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上，而不是它的前面或者后面。如果对一个元素设置了transform-style的值为preserve-3d，它表示不执行平展操作，他的所有子元素位于3D空间中。

transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素。
2.translateZ（）
在Z轴上移动xx距离
3.常见的比较容易弄混的css样式
（1）skew() 方法
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
（2）rotate（）方法
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
值 rotate(30deg) 把元素顺时针旋转 30 度。
（3）translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：
值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素