CSS 2D转换

• CSS3 rotate()    旋转
• CSS3 translate()  平移
• CSS3 scale()  缩放
• CSS3 skew()   扭曲或斜切
• CSS3 matrix()  矩阵或混合

    旋转rotate

通过指定的角度参数对原元素指定一个2D rotation(2D旋转 )     

语法：transform:rotate(<angle>)

参数说明：angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转

            
                                         
     
         
      
       
       
2D装换
      
         
      
       
       
2D装换
      
         
      
       
       
2D装换
      
         
      
       
       
2D装换
      
         
      
       
       
2D装换
      
         
      
       
       
2D装换
      
     
     
    

 

 

移动translate（X轴的坐标原点在左边，Y轴的坐标原点在上边）

translate()方法，根据左轴（X轴）和顶部（Y轴）位置给定参数，从当前元素位置移动

• translateX(x)  仅水平方向移动（X轴移动）
• translateY(y)  仅垂直方法移动（Y轴移动）
• translate(x,y)  水平方向和垂直方向同时移动

 

     translateX

 

 

 

 translateY(y)

 

 

 

translate(x,y)

 

 

 缩放scale（水平和垂直方向的坐标原点在中心）

scale()方法，指定对象的2D scale(2D 缩放)

• scaleX(x)  元素仅水平方向缩放（X轴缩放）
• scaleY(y)  元素仅垂直方向缩放（Y轴缩放）
• scale(x,y)  是元素水平方向和垂直方向同时缩放

scaleX

 

 scaleY(y)

scale(x,y)

扭曲skew（逆时针斜切）

skew()方法，指定对象斜切扭曲

• skewX(x)  仅使元素在水平方向扭曲变形（X轴扭曲变形）
• skewY(y)  仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
• skew(x,y)  使元素水平和垂直方向同时扭曲

skewX(x)

 

skewY(y) 

 

 

skew(x,y)