h5入门——使用h5实现3d旋转以及立方体

在学习h5的时候，发现可以实现3d视角的动画特效，这里跟大家分享下。
首先在学习之前，我们需要了解一些关于css动画的属性。

css3 - 2D变形属性

在平面进行位置的移动 transform:translate()
在平面进行旋转 transform:rotate()
在平面进行缩放 transform:scale()
在平面进行倾斜 transform:skew()

参数设置

1）2D位移：transform:translate(X，Y)
X：表示在X轴移动的距离；
Y：表示在Y轴移动的距离。
注：参数X,Y如果是正值的情况下，位移是往右往下，负值则是往左往上。
如果想要单独设置在X，Y轴上的距离，可以使用transform:translateX(参数);transform:translateY(参数)。
2）2D倾斜：transform:skew()
括号内的参数一般设置为角度deg
如果想单独设置x,y轴上的倾斜程度，可以用transform:skewX()；transform:skewY()，这两个来实现。
3）2D缩放：transform:scale(X,Y);
注：0＜X ＜0.999999 缩小；X＜1 放大。
X：X轴缩放的比例
Y：Y轴缩放的比例
注：如果两个参数相同的情况下 直接写一个。
如果想单独设置x,y轴上的缩放程度，可以用transform:scaleX();transform:scaleY()，这两个来实现。
4）2D旋转：transform:rotate();
旋转的是一个度数 deg。
默认情况下：绕着中心点进行转动。

变形原点

transform-origin，这个属性关乎我们设置2d动画以及3d动画变形中心，一般默认设置是auto，当我们对这个属性进行设置以后，2d动画以及3d动画的变形中心就会改变。

css3 - 3D变形属性

3d变形属性本质上跟2d变形动画没有区别，比较关键的一点是transform-style这个属性，在进行3d变形之前，我们需要将这个属性设置为preserve-3d，将父元素形成3d空间，让子元素可以在父元素形成的3d空间内进行变化。
3d较于2d，在形成3d空间以后，多了一个垂直于水平屏幕的z轴。
1）3D的位移：transform:translate3d(x,y,z);
translateX() ；
translateY()；
translateZ()。
2）3D的旋转：transform:rotate3d();
rotateX()；
rotateY()；
rotateZ()；
rotate3D()。
3）3D缩放：transform:scale3d(x,y,z);
scaleX()；
scaleY()；
scaleZ()。
了解了以上属性之后，我们下面可以来实现3d旋转以及立方体的变化了。

使用h5实现——3d旋转

    
    
    
    


    
"box">
        

    

通过将transform-style属性设置为preserve-3d，达到我们实现3d特效的目的。

使用h5实现——立方体

    
    
    
    


    
"box">
        "" alt="">
        
"con1">1
        
"con2">2
        
"con3">3
        
"con4">4
        
"con5">5
        
"con6">6