将以下代码复制到本地就可以看到效果：

    
         
只有在transform属性存在情况下transform-style和transform-origin才会有效果。
transform属性介绍：
     
          
       
                
值
                
描述
           
           
                
none
                
定义不进行转换。
           
           
                
matrix(n,n,n,n,n,n)
                
定义 2D 转换，使用六个值的矩阵。
           
           
                
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
                
定义 3D 转换，使用 16 个值的 4x4 矩阵。
           
           
                
translate(x,y)
                
定义 2D 转换。
           
           
                
translate3d(x,y,z)
                
定义 3D 转换。
           
           
                
translateX(x)
                
定义转换，只是用 X 轴的值。
           
           
                
translateY(y)
                
定义转换，只是用 Y 轴的值。
           
           
                
translateZ(z)
                
定义 3D 转换，只是用 Z 轴的值。
           
           
                
scale(x[,y]?) 
                
定义 2D 缩放转换。
           
           
                
scale3d(x,y,z)
                
定义 3D 缩放转换。
           
           
                
scaleX(x)
                
通过设置 X 轴的值来定义缩放转换。
           
           
                
scaleY(y)
                
通过设置 Y 轴的值来定义缩放转换。
           
           
                
scaleZ(z)
                
通过设置 Z 轴的值来定义 3D 缩放转换。
           
           
                
rotate(angle)
                
定义 2D 旋转，在参数中规定角度。
           
           
                
rotate3d(x,y,z,angle)
                
定义 3D 旋转。
           
           
                
rotateX(angle)
                
定义沿着 X 轴的 3D 旋转。
           
           
                
rotateY(angle)
                
定义沿着 Y 轴的 3D 旋转。
           
           
                
rotateZ(angle)
                
定义沿着 Z 轴的 3D 旋转。
           
           
                
skew(x-angle,y-angle)
                
定义沿着 X 和 Y 轴的 2D 倾斜转换。
           
           
                
skewX(angle)
                
定义沿着 X 轴的 2D 倾斜转换。
           
           
                
skewY(angle)
                
定义沿着 Y 轴的 2D 倾斜转换。
           
           
                
perspective(n)
                
为 3D 转换元素定义透视视图。
           
          
     
实例:
X轴旋转：
     
Y轴旋转：
     
平面旋转：
     
transform-origin定位旋转的锚点：就是设置图形按照哪一个点旋转。举例：把一张白纸使用冒顶钉在墙上，转动白纸，白纸围绕钉子转，钉子的位置就是锚点。
     
          
       
                
值
                
描述
           
           
                
x-axis
                
            
定义视图被置于 X 轴的何处。可能的值：
            
         
                
          
left
                
          
center
                
          
right
                
          
length
                
          
%
            
         
        
           
           
                
y-axis
                
            
定义视图被置于 Y 轴的何处。可能的值：
            
         
                
          
top
                
          
center
                
          
bottom
                
          
length
                
          
%
            
         
        
           
           
                
z-axis
                
            
定义视图被置于 Z 轴的何处。可能的值：
            
         
                
          
length
            
         
        
           
          
     
     
transform-style设置旋转模式为2D还是3D。3d效果必须采用transform支持3d的方法，否则将会是2D效果。
     
          
       
                
值
                
描述
           
           
                
flat
                
表示所有子元素在2D平面呈现。
           
           
                
preserve-3d
                
表示所有子元素在3D空间中呈现。
           
          
     
     
      3D
     
     
      2D
     

 

transform属性

只有在transform属性存在情况下transform-style和transform-origin才会有效果。

transform属性介绍：

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

实例:

X轴旋转：

 

Y轴旋转：

 

平面旋转：

 

transform-origin定位旋转的锚点：就是设置图形按照哪一个点旋转。举例：把一张白纸使用冒顶钉在墙上，转动白纸，白纸围绕钉子转，钉子的位置就是锚点。

值	描述
x-axis	定义视图被置于 X 轴的何处。可能的值： left center right length %
y-axis	定义视图被置于 Y 轴的何处。可能的值： top center bottom length %
z-axis	定义视图被置于 Z 轴的何处。可能的值： length

 

transform-style设置旋转模式为2D还是3D。3d效果必须采用transform支持3d的方法，否则将会是2D效果。

值	描述
flat	表示所有子元素在2D平面呈现。
preserve-3d	表示所有子元素在3D空间中呈现。

3D

2D