CSS3 2D变形 过渡 动画

​​​​​

• transform(2D变形)
• 概述translate()平移scale()缩放
• skew()倾斜
• rotate()旋转
• transform-origin中心原点

• CSS3 2D变形 3D变形 过渡 动画
  在CSS3中，动画效果包括4个部分：变形（transform）、3D变形、过渡（transition）、动画（animation）。

 

translate() 平移
语法

transform: translateX(x);　　　 /*沿x轴方向平移*/
transform: translateY(y);　　　 /*沿y轴方向平移*/
transform: translate(x, y);　　 /*沿x轴和y轴同时平移*/

示例 

    
        
        
        
    
    
        

            

        

    

 

 

scale() 缩放
语法

transform: scaleX(x);　　　 /*沿x轴方向缩放*/
transform: scaleY(y);　　　 /*沿y轴方向缩放*/
transform: scale(x, y);　　 /*沿x轴和y轴同时缩放*/

示例

    
        
        
        
    
    
        

            

        

    

 

skew() 倾斜
语法

transform: skewX(x);　　　　/*沿x轴方向倾斜*/
transform: skewY(y);　　　　/*沿y轴方向倾斜*/
transform: skew(x, y);　　　/*沿x轴和y轴同时倾斜*/

示例

    
        
        
        
    
    
        

            

        

    

 

 

​
rotate() 旋转
语法

transform: rotate(angle);

说明

angle参数：表示元素相对于中心原点旋转的度数，单位为deg。如果度数为正，则表示顺时针旋转；如果度数为负，则表示逆时针旋转。

​

示例

    
        
        
        
    
    
        

            

        

    

 

transform-origin 中心原点
语法

transform-origin: 取值;
1
说明

transform-origin属性取值有两种：一种是“长度值”，另一种是“关键字”。

当取值为长度值时，单位可以为px、em和百分比等。

当取值为关键字时，transform-origin属性取值跟background-position属性取值是相似的。

 示例