h5 3D旋转立方体

  本周是学习h5并制作一个相关的页面。我最初的想法是做一个骰子，然后还可以自己旋转。但是很遗憾得是没有实现，因为最开始我就直接在画布上画正方体，画了好久没成功。后来去找别人的实例，慢慢跟着学，最后做了一个旋转的立方体，但并不是骰子。

  要用到的知识点主要是

     1、perspective：透视

     2、transform：   rotate：旋转        translate：平移

     3、@keyframes： 实现动画

     4、canvas： 画布

  首先准备六个正方形包裹在同一个父级容器里面，并且将父级容器设置为：transform-style: preserve-3d。这样接下来就可以对六个面进行3D转换。

  把六个面都设置成绝对定位，那么就只能看到一个蓝色的正方形。

  然后需要将父容器进行一定的旋转操作：transform: rotateX(-20deg) rotateY(-20deg);转换之后的图形如下：

                                  

  接下来就可以对各个面进行3D变换了：

                

                

调整好角度和距离，就可以看到一个正方体了：

                   

可以适当调整各个面的透明度以及父容器的旋转角度，是之看起来更加有立体感。