CSS3 3D动画 transform

今天我来总结一下 CSS3 的 3D 动画。话不多说，直接上代码讲解

一、首先3D 动画的几个重要样式

1.perspective 规定 3D 元素的透视效果。

- perspective:number;

- 元素距离视图的距离（近大远小原理）

2.backface-visibility 定义元素在不面对屏幕时是否可见。

- visible 背面是可见的

- hidden 背面是不可见得

3.transform-style:preserve-3d 使被转换的子元素保留其 3D 转换

4.perspective-origin 定义3D元素所基于的X轴和Y轴。该属性该属性允许您改变 3D 元素的底部位置。

HTML:

<div class="wapr">
<div id = "container">
<div class="front" style="background:rgba(230,9,61,0.3);">1</div>
<div class="back" style="background:rgba(9,35,230,0.3);">2</div>
<div class="left" style="background:rgba(247,153,6,0.3);">3</div>
<div class="right" style="background:rgba(46,247,6,0.6);">4</div>
<div class="top" style="background:rgba(247,6,221,0.6);">5</div>
<div class="bottom" style="background:rgba(131,6,247,0.6);">6</div>
</div>
<div>

CSS:

*{margin:0;padding:0;}
body{background:#cccccc;overflow: hidden;}
.wapr{
width:300px;
height:300px;
position:absolute;
top:20%;
left:20%;
perspective:300px;
-webkit-perspective:300px;
-moz-perspective:300px;
-ms-perspective:300px;
background:url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg);
}
#container{
position: absolute;
top:37%;
left:37%;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform:translateZ(130px) rotate3d(0,0,0,0deg);
animation:dong 12s linear  infinite;
-webkit-animation:dong 12s linear  infinite;
}

@keyframes dong{
0%{
transform:translateZ(130px)  rotate3d(0,0,0,180deg);

}
20%{
transform:translateZ(130px)  rotate3d(1,1,0,360deg);

}
40%{
transform:translateZ(130px)  rotate3d(1,1,0,180deg);

}
60%{
transform:translateZ(130px)  rotate3d(1,1,0,0deg);
}
80%{
transform:translateZ(130px)  rotate3d(1,1,0,-180deg);
}
100%{
transform:translateZ(130px) rotate3d(0,0,0,-360deg);
}
}
@-webkit-keyframes dong{
0%{
transform:translateZ(130px)  rotate3d(0,0,0,180deg);

}
20%{
transform:translateZ(130px)  rotate3d(1,1,0,360deg);

}
40%{
transform:translateZ(130px)  rotate3d(1,1,0,180deg);

}
60%{
transform:translateZ(130px)  rotate3d(1,1,0,0deg);
}
80%{
transform:translateZ(130px)  rotate3d(1,1,0,-180deg);
}
100%{
transform:translateZ(130px) rotate3d(0,0,0,-360deg);
}
}
#container div{
width:75px;
height:75px;
font-size:30px;
font-weight: bold;
text-align: center;
line-height:75px;
position:absolute;
box-sizing:border-box;
border:2px solid #046902;
color:white;
}
.front{
transform:translateZ(37.5px);
-webkit-transform:translateZ(37.5px);
}
.back{
transform:rotateX(180deg) translateZ(37.5px);
-webkit-transform:rotateX(180deg) translateZ(37.5px);
}
.left{
transform:rotateY(-90deg) translateZ(37.5px);
-webkit-transform:rotateY(-90deg) translateZ(37.5px);
}
.right{
transform:rotateY(90deg) translateZ(37.5px);
-webkit-transform:rotateY(90deg) translateZ(37.5px);
}
.top{
transform:rotateX(90deg) translateZ(37.5px);
-webkit-transform:rotateX(90deg) translateZ(37.5px);
}
.bottom{
transform:rotateX(-90deg) translateZ(37.5px);
-webkit-transform:rotateX(-90deg) translateZ(37.5px);
}

源代码：

css3 3D 动画源代码