CSS |二维变换

转换通过元素的形状、大小和位置来修改元素。它沿 X 轴和 Y 轴变换元素。
下面列出了六种主要的转换类型：

• 翻译()
• 旋转()
• 规模()
• 偏斜X()
• 偏斜()
• 矩阵()

translate() 方法： translate() 方法用于将元素从其实际位置移动到沿 X 轴和 Y 轴的位置。
例子：

    
        
        
    
    
        
Translate() Method
        
    

输出：

rotate() 方法： rotate() 方法根据给定的度数顺时针或逆时针旋转元素。学位在括号中给出。
例子：

    
        
    
    
    
        
Rotation() Method
        
    
                    

输出：

逆时针旋转：使用负值逆时针旋转元素。
例子：

    
        
    
    
    
        
Counter-clock Rotate() Method
        
    
                    

输出：

scale() 方法：用于根据给定的宽度和高度参数增加或减少元素的大小。
例子：

    
        
    
    
    
        
Scale() Method
        
    
                    

输出：

注意：元素的大小可以使用其宽度和高度的一半来减小。

skewX() 方法：此方法用于沿 X 轴以给定角度倾斜元素。
例子：

    
        
    
    
    
        
skewX() Method
        
    
                    

输出：

skewY() 方法：此方法用于沿 Y 轴以给定角度倾斜元素。

    
        
    
    
    
        
skewY() Method
        
    
                    

输出：

skew() 方法：此方法沿 X 轴和 Y 轴以给定角度倾斜元素。以下示例将元素沿 X 轴倾斜 20 度，沿 Y 轴倾斜 10 度：
例子：

    
        
    
    
    
        
skew() Method
        
    
                    

输出：

matrix() 方法：此方法将所有 2D 变换属性合并为一个属性。矩阵变换属性接受六个参数，如下所示：
矩阵( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )
例子：

    
        
    
    
    
        
matrix() Method
        
    
                    

输出：