HTML | DOM 样式转换属性

HTML DOM 中的样式转换属性用于转换对象。 transform 属性允许对元素进行旋转、缩放、移动、倾斜等操作。它可以使用 2D 或 3D 变换。

句法：

• 它返回变换属性。

  object.style.transform

• 它用于设置转换属性。

  object.style.transform = "none|transform-functions|initial|
  inherit"

属性值：

Value	Description
none	No transformation takes place.
matrix(x, x, x, x, x, x)	Specifies a matrix transformation of 2-D type. It takes 6 values.
matrix3d(x, x, x, x, x, x, x, x, x)	Specifies a matrix transformation of 3-D type. It takes 9 values.
translate(x, y)	Specifies a translation across the X and Y axes.
translate3d(x, y, z)	Specifies a translation across the X, Y and the Z axes.
translateX(x)	Specifies the translation across the X-axis only.
translateY(y)	Specifies the translation across the Y-axis only.
translateZ(z)	Specifies the translation across the Z-axis only.
rotate(angle)	Specifies the angle of rotation.
rotateX(angle)	Specifies the rotation along the X-axis corresponding to the angle of rotation.
roatateY(angle)	Specifies the rotation along the Y-axis corresponding to the angle of rotation.
roteteZ(angle)	Specifies the rotation along the Z-axis corresponding to the angle of rotation.
scale(x, y)	Specifies the scale transformation along the X and Y axes.
scale3d(x, y, z)	Specifies the scale transformation along the X, Y and Z axes.
scaleX(x)	Specifies the scale transformation along the X-axis.
scaleY(y)	Specifies the scale transformation along the Y-axis.
scaleZ(z)	Specifies the scale transformation along the Z-axis.
scale3d(x, y, z)	Specifies the scale transformation along the X, Y and Z axes.
skew(angle, angle)	Specifies the skew transformation along the X and Y axes corresponding the skew angles.
skewX(angle)	Specifies the skew transformation along the X-axis corresponding to the skew angle.
skewY(angle)	Specifies the skew transformation along the Y-axis corresponding to the skew angle.
skewZ(angle)	Specifies the skew transformation along the Z-axis corresponding to the skew angle.
perspective(x)	Specifies the perspective of an element.
initial	Initializes the element to its default value.
inherit	Inherits the value from its parent element.

示例 1：此示例描述了元素的旋转。

      

      
    
        HTML DOM Style transform Property
    
      
    
    
        function myGeeks() {
            document.getElementById("GFG").style.transform
                    = "rotate(90deg)"; 
        }
    
  
    
     
        #GFG {
            margin: 70px;
            border: 1px solid black;
            width: 220px;
            height: 80px;
            background-color: #0f9d58;
            text-align:center;
            color: white;
        }
    

  

    
        Click Here!
    
      
    
        GeeksforGeeks
    

  
                    

输出：

点击按钮前：

点击按钮后：

示例 2：此示例描述了 skew 属性值。

      

      
    
        HTML DOM Style transform Property
    
      
    
    
        function myGeeks() {
            document.getElementById("GFG").style.transform
                    = "skew(30deg, 30deg)"; 
        }
    
  
    
     
        #GFG {
            margin: 70px;
            border: 1px solid black;
            width: 220px;
            height: 80px;
            background-color: #0f9d58;
            text-align:center;
            color: white;
        }
    

  

    
        Click Here!
    
      
    
        GeeksforGeeks
    

  
                    

输出：

• 点击按钮前：
  
• 点击按钮后：
  

支持的浏览器： DOM样式转换属性支持的浏览器如下：

• 谷歌浏览器 36.0
• Internet Explorer 10.0、9.0 msTransform
• 火狐 16.0
• 歌剧 23.0