Css3 3D旋转图片立方体特效

H5里，我们会学到3D的一些动画特效。什么是3D动画特效呢？动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
他的作用是通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
那么怎么去实现这一类的效果呢。首先就是把我们的页面，也就是舞台变为3D的舞台，不在平常的平面里做了。
通过在父元素设置transform-style:preserve-3d;属性，可以把舞台转化为3D，那么先解释一下3D舞台的X,Y,Z轴吧。就好比我们在平面看到的一样X轴依然还是从左到右，Y轴从下到上，那么Z轴是分别垂直于X,Y轴的，它的方向是从显示器的背面穿过显示器指向我们的一条线。X,Y,Z轴都是带方向的，这个在后期我们属性值的大小有关，正值便是向着正方向运动，负值就是朝着反方向运动。
那么我先把其中的一些属性放出来吧。
3D的位移：
transform:translate3d(x,y,z);
translateX()
translateY()
translateZ(不能是百分比)

3D的旋转：
    transform:rotate();
        rotateX()
        rotateY()
        rotateZ()  //默认情况效果类似
        rotate3D(x,y,z,a)   [ 0不旋转。1旋转 ]
            - x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
            - y：是一个0到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
            - z：是一个0到１之间的数值&