CSS3-3D动画制作旋转立方体动画制作旋转立方体
CSS3-3D动画制作旋转立方体动画制作旋转立方体
3D动画是CSS3才有的属性，制作立方体的思路是使用6个正方形div，通过绝对定位+旋转+位移来合成一个立方体。然后再使
父亲旋转。
旋转后的面会变成新的旋转后的面会变成新的X-Y面，旋转后面，旋转后Z轴和位移是对新的面来说的，不是原来的面来说的，这点很重要，一定不要搞错。轴和位移是对新的面来说的，不是原来的面来说的，这点很重要，一定不要搞错。
（也就是旋转后坐标轴的方向会改变）（也就是旋转后坐标轴的方向会改变）
代码很短，主要属性都加了注释了
/* 制作动画的关键字@keyframes */
@keyframes rotate {
100% {
/* 按(-1,1,0)这个矢量方向旋转360度，之所以不选坐标轴，是为了能看到六个面~ */
transform: rotate3D(-1, 1, 0, 360deg);
}
}
body {
/* 视角距离，给3D元素的父亲，否则无法看到3D效果 */
perspective: 1000px;
}
section {
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 100px auto;
/* 使子元素以3D形式显示，默认是2D，没有立体感 */
transform-style: preserve-3d;
/* 动画调用 调用名为rotate的动画，执行周期是5s，线性速度变化，永久变化 */
animation: rotate 5s linear infinite;
}
div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* rotateX是以X轴为旋转轴，translate移动的位置是以旋转后的面为X-Y平面，不是以旋转前的面，这一点一定要理解。 */
/* 前面 */
div:nth-child(1) {
/* 前面先旋转0度，然后在3D空间内，往面向用户的方向前进50px */
资源评论
