实现3D动画

一、transform

Transform是形变的意思（通常也叫变换），transformer就是变形金刚
常见的函数transform function有：
平移：translate(x, y)
缩放：scale(x, y)
旋转：rotate(deg)
倾斜：skew(deg, deg

二、rotate（旋转）

该CSS函数定义一个变换，它将元素围绕固定轴旋转。旋转量由指定的角度确定; 为正，旋转将为顺时针，为负，则为逆时针。

只有一个值，表示旋转的角度（单位deg）

三、translate（平移）

translateX(x)、translateY(y)、translateZ(z)
该函数表示在二、三维平面上移动元素

四、scale（缩放）

scaleX、scaleY、scaleZ
函数指定了一个沿 x、y 、z轴调整元素缩放比例因子

 1：保持不变
 2：放大一倍
0.5：缩小一半

五、transform-style（选择3D） 

transform-style

该CSS属性用于设置元素的子元素是定位在 3D 空间中还是平展在元素的2D平面中

flat：指示元素的子元素位于元素本身的平面内。

preserve-3d：指示元素的子元素应位于 3D 空间中

 六、制作一个正方体

  
    
    
    
    
  
  
  
    

      div
      
      
1
      
2
      
3
      
4
      
5
      
6