(作者：杨东升，撰写时间：2019年1月26日)
通过Css3，我们能够创建动画，这可以在许多网页中取代一些JavaScript中复杂的动画效果的写法，下面让我们用css3实现一个旋转的立方体吧。
Html部分：
1）先给六个面写一个公共的类：cube-face，再给六个面分别给六个不同的类名：
< div class=“cube”>
< div class=“cube-face cube-face-front”>< /div>
< div class=“cube-face cube-face-left”>< /div>
< div class=“cube-face cube-face-back”>< /div>
< div class=“cube-face cube-face-right”>< /div>
< div class=“cube-face cube-face-top”>< /div>
< div class=“cube-face cube-face-bottom”>< /div>
< /div>
2）给body一个背景颜色，perspective可以使动画更有立体感：
body{
background: #222020;
perspective: 600px;/元素距视图的距离/
}
3）给cube宽高，相对定位和动画效果：
.cube{
width: 150px;
height: 150px;
position: relative;
top: 100px;
left: 45%;
transform-style: preserve-3d; /在3D空间中呈现被嵌套的元素，必须与transform属性一同使用/
animation: rotationMainContainer 5s linear infinite;/动画的名称，执行时间，匀速运动，无限次数/
创建动画，定义动画的名称，时长的百分比
@keyframes rotationMainContainer{
0%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);/* 元素围绕其X Y Z轴旋转的度数*/
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
4）给公共样式cube-face宽高，绝对定位：
.cube-face{
width: 150px;
height: 150px;
position:absolute;
/background: #0b63be;/
opacity: .5;/透明度/
}
5） 六个面的样式：
前面的面代码：
.cube-face-front{
transform: translatez(75px);/ z轴方向进行偏移75个像素/
animation: bgCAFace 5s linear infinite;
}
@keyframes bgCAFace{
0% {background: #1242B1;}
25% {background: #1925AF;}
50% {background: #1360C8;}
100%{background: #0A3CA0;}
}
一个面效果图：
后面的面代码：
.cube-face-back{
transform: translateZ(-75px);
animation: bgCABack 5s linear infinite;
}
@keyframes bgCABack{
0% {background: #1360C8;}
25% {background: #1242B1;}
50% {background: #1925AF;}
100%{background: #0A3CA0;}
}
两个面效果图：
左边的图代码：
.cube-face-left{
transform:rotateY(90deg) translateZ(75px);/y坐标旋转90度，z轴方向进行偏移75个像素/
animation: bgCALeft 5s linear infinite;
}
@keyframes bgCALeft{
0% {background: #1242B1;}
25% {background: #0A3CA0;}
50% {background: #1925AF;}
100%{background: #1360C8;}
}
三个面效果图：
右边的图代码：
.cube-face-right{
transform: rotateY(90deg) translateZ(-75px);
animation: bgCARight 5s linear infinite;
}
@keyframes bgCARight{
0% {background: #0A3CA0;}
25% {background: #1242B1;}
50% {background: #1360C8;}
100%{background: #1925AF;}
}
四个面效果图：
上边的图代码：
.cube-face-top{
transform: rotateX(90deg) translateZ(-75px);
animation: bgCATop 5s linear infinite;
}
@keyframes bgCATop{
0% {background: #1360C8;}
25% {background: #0A3CA0;}
50% {background: #1925AF;}
100%{background: #1242B1;}
}
五个面效果图：
下边的图代码：
.cube-face-bottom{
transform: rotateX(-90deg) translateZ(-75px);
animation: bgCABottom 5s linear infinite;
}
@keyframes bgCABottom{
0% {background: #1242B1;}
25% {background: #1360C8;}
50% {background: #1925AF;}
100%{background: #0A3CA0;}
}
完成图：
