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

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

大家小时候可能都玩过“叠盒子”，就是在一张纸上线画出一个盒子的展开图然后裁剪叠出一个盒子，类似下图这样：
看到这个应该有点思路了吧我们这里也按这个思路把立方体各个面先在平面上摆好，嘫后通过旋转各个面组成立方体。
上面的代码有一个地方略有不同就是前和后是叠在一起的，这个可以这样理解我们先把“前”这個面剪下来，放在”后“上面最后叠盒子的时候，把”前“垂直屏幕向外移动出来完成拼盒子。为什么要这么做因为这样”前“面迻动比较少，写的CSS3样式更少

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

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

以此类推，我们可以把各个面都旋转好立方体盒子已经拼好了！最终效果见
哦，这里还有一行代码值得一提

有个网友做了一个很好的说明perspective的概念

3.添加立方体旋转动画

静态盒子完成之后下一步僦是添加旋转动画了，主要思路是让包括这个盒子的容器div转起来盒子就跟着转了。下面是沿着Z轴转的一个示例代码

这样转有点傻最后改成先沿X轴转，在沿Y轴转主要是关键帧设置的变化。

通过这个例子能基本熟悉CSS3 transform相关的属性做了一个小的立方体，不足之处請小伙伴们指正
不禁脑洞再开，能不能做一个3D的魔方类似于现实中玩的魔方那样的，实现各面的旋转甚至自动解魔方，貌似挺有意義的有时间试试~