一 需求样式：
二 代码示意：
<!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 像素
版权声明：本文为bulabulahei原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。