纯CSS3实现一个旋转的3D立方体盒子

简介

上网易前端微专业课程，里面有一个课外作业是实现一个3D旋转立方体，花了点时间做了下，还有点意思，写个简单教程，供大家学习。
先放上最终要实现的效果
注：代码在chrome 43.0.2357.124 m正常，其他浏览器未测试

步骤

1.在二维平面上放置好各个面

大家小时候可能都玩过“叠盒子”，就是在一张纸上线画出一个盒子的展开图，然后裁剪叠出一个盒子，类似下图这样：

看到这个应该有点思路了吧，我们这里也按这个思路把立方体各个面先在平面上摆好，然后通过旋转各个面，组成立方体。
效果见代码-1
上面的代码有一个地方略有不同，就是前和后是叠在一起的，这个可以这样理解，我们先把“前”这个面剪下来，放在”后“上面，最后叠盒子的时候，把”前“垂直屏幕向外移动出来，完成拼盒子。为什么要这么做？因为这样”前“面移动比较少，写的CSS3样式更少

2.在三维空间旋转面，组成立方体盒子

最关键的一步到了，通过CSS3属性实现各个面的旋转，这里给出一个”左“面和”