CSS3提供了一些绘图和动画的功能，我们可以纯粹利用CSS3来画出一个在屏幕上旋转的立方体，demo戳这里。
立方体是由六个面组成的，每个面都是一个<div>元素。我们需要对每个面进行位置和方向的调整，才能组合显示成一个立方体。先来看看CSS3中使用的三维坐标系。
三维坐标系
这里的坐标系与立体几何中的坐标系有所不同。上图中，由左至右为x轴的正方向，而Y轴则是由上至下，Z轴由屏幕内指向屏幕外。
transform属性
transform属性用于向元素应用2D或3D转换，在绘制立方体的过程中用到了旋转和平移这两种。
平移
translateX(200px); /*向X轴的正方向平移200像素，即从左向右移动*/ translateY(200px); /*向Y轴的正方向平移200像素，即从上向下移动*/ translateZ(200px); /*向Z轴的正方向平移200像素，即从屏幕内向外移动*/
当平移的数值为负值时，表示向反方向移动。
旋转
旋转也分为绕三个轴的旋转。如何区分旋转时的顺时针和逆时针呢，这里使用的是左手法则。以绕X轴旋转为例，左手握住X轴，大拇指的方向指向X轴的正方向右侧，这样便是在绕X轴顺时针旋转。反之，拇指指向左侧时，是逆时针旋转。
rotateX(45deg); /*绕X轴顺时针旋转45度*/ rotateY(45deg); /*绕Y轴顺时针旋转45度*/ rotateZ(45deg); /*绕Z轴顺时针旋转45度*/
当上述数值为负值时，表示逆时针旋转。
由平移和旋转组合成立方体
现在我们有的是六个平面，需要通过平移和旋转这两个操作将它们移至合适的位置，可以对它们进行如下的操作。
div#front {
transform: translateZ(200px);
}
div#back {
transform: translateZ(-200px) rotateY(180deg);
}
div#left {
transform: rotateY(-90deg) translateZ(200px);
}
div#right {
transform: rotateY(90deg) translateZ(200px);
}
div#top {
transform: rotateX(90deg) translateZ(200px);
}
div#bottom {
transform: rotateX(-90deg) translateZ(200px);
}
对于左侧平面，先需要绕Y轴逆时针旋转90度，再向左平移200像素。这里有一个需要注意的地方，当向左侧平移的时候，不是translateX(-200px)，而是translateZ(200px)。
为什么呢？在我们平常的认知中，在旋转过程中，只有元素在旋转，而坐标系是保持不变的。但是在这里，元素和我们的坐标系是绑定在一起旋转的。当元素绕Y轴逆时针旋转90度时，整个坐标系同样旋转了90度，因而Z轴的正方向就由指向屏幕外变成了指向左侧，所以向左侧平移成了translateZ(200px)。其余几个面的移动同样需要注意这一点。
perspective和perspective-origin
perspective代表的是perspective depth，指的是观察者的眼睛至屏幕的垂直距离，即下图中的d。
而图中的Z代表的是目标在Z轴上的偏移量。Z为正值时，目标变近，在屏幕上的投影变大。
perspective-origin表示的是视点位置，它是一个二维坐标，原点在左上角，它的单位可以是像素值，也可以是百分比，默认值是{x:50%, y:50%}，也就是正中心。
#container {
perspective: 1000px;
perspective-origin: 50% 50%;
}
加入一点动画效果
为了让我们的立方体旋转起来，需要用@keyframes规则加入一点简单的动画效果。
/*同时绕X和Y轴旋转，从0度至360度*/
@keyframes spin {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg)
}
}
/*绑定到上面的spin动画上，循环运动，每次用时5s*/
#cube {
animation: spin 5s infinite linear;
}
最终我们就用CSS3实现了一个不停旋转的立方体。
参考网址：
