CSS3-3D动画制作旋转立方体
3D动画是CSS3才有的属性，制作立方体的思路是使用6个正方形div，通过绝对定位+旋转+位移来合成一个立方体。然后再使父亲旋转。
旋转后的面会变成新的X-Y面，旋转后Z轴和位移是对新的面来说的，不是原来的面来说的，这点很重要，一定不要搞错。（也就是旋转后坐标轴的方向会改变）
代码很短，主要属性都加了注释了
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3动画制作旋转立方体</title>
<style>
/* 制作动画的关键字@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 */
transform: rotateY(0deg) translateZ(50px);
background-color: purple;
}
/* 后面 */
/* 后面先旋转180度，然后在3D空间内，往面向用户的方向前进50px，注意此时已经旋转到了背面，用户是面向背面了 */
div:nth-child(2) {
transform: rotateY(180deg) translateZ(50px);
background-color: rgb(32, 128, 0);
}
/* 上面 */
div:nth-child(3) {
transform: rotateX(90deg) translateZ(50px);
background-color: rgb(73, 63, 170);
}
/* 下面 */
div:nth-child(4) {
transform: rotateX(-90deg) translateZ(50px);
background-color: rgb(194, 110, 33);
}
/* 左面 */
div:nth-child(5) {
transform: rotateY(-90deg) translateZ(50px);
background-color: rgb(48, 201, 168);
}
/* 右面 */
div:nth-child(6) {
transform: rotateY(90deg) translateZ(50px);
background-color: pink;
}
</style>
</head>
<body>
<section>
<div>01 - 前面</div>
<div>02 - 后面</div>
<div>03 - 顶面</div>
<div>04 - 底面</div>
<div>05 - 左面</div>
<div>06 - 右面</div>
</section>
</body>
</html>