HTML Style transform用法及代码示例

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

用法:

它返回transform属性。
```
object.style.transform
```

它用于设置transform属性。

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

属性值：

值	描述
none	不进行任何转换。
matrix(x, x, x, x, x, x)	指定二维类型的矩阵转换。它需要6个值。
matrix3d(x, x, x, x, x, x, x, x, x)	指定3-D类型的矩阵转换。它需要9个值。
translate(x, y)	指定X和Y轴上的平移。
translate3d(x, y, z)	指定在X，Y和Z轴上的平移。
translateX(x)	仅指定沿X轴的平移。
translateY(y)	仅指定沿Y轴的平移。
translateZ(z)	仅指定沿Z轴的平移。
rotate(angle)	指定旋转角度。
rotateX(angle)	指定与旋转角度相对应的沿X轴的旋转。
roatateY(angle)	指定对应于旋转角度的沿Y轴的旋转。
roteteZ(angle)	指定对应于旋转角度的沿Z轴的旋转。
scale(x, y)	指定沿X和Y轴的比例转换。
scale3d(x, y, z)	指定沿X，Y和Z轴的比例转换。
scaleX(x)	指定沿X轴的比例转换。
scaleY(y)	指定沿Y轴的比例转换。
scaleZ(z)	指定沿Z轴的比例变换。
scale3d(x, y, z)	指定沿X，Y和Z轴的比例转换。
skew(angle, angle)	指定沿对应于倾斜角的X和Y轴的倾斜变换。
skewX(angle)	指定与偏斜角相对应的沿X轴的偏斜变换。
skewY(angle)	指定对应于偏斜角的沿Y轴的偏斜变换。
skewZ(angle)	指定与偏斜角相对应的沿Z轴的偏斜变换。
perspective(x)	指定元素的透视图。
initial	将元素初始化为其默认值。
inherit	从其父元素继承值。

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

<!DOCTYPE html> 
<html> 
      
<head> 
      
    <title> 
        HTML DOM Style transform Property 
    </title> 
      
    <!-- script to use Style transform Property -->
    <script> 
        function myGeeks() { 
            document.getElementById("GFG").style.transform 
                    = "rotate(90deg)";  
        } 
    </script> 
  
    <!-- CSS style to create div element -->
    <style>  
        #GFG { 
            margin:70px; 
            border:1px solid black; 
            width:220px; 
            height:80px; 
            background-color:#0f9d58; 
            text-align:center; 
            color:white; 
        } 
    </style> 
</head> 
  
<body> 
    <button onclick = "myGeeks()"> 
        Click Here! 
    </button> 
      
    <div id = "GFG"> 
        <h1>GeeksforGeeks</h1> 
    </div> 
</body> 
  
</html>

输出：

之前单击按钮：
单击按钮后：

范例2：本示例描述了偏斜属性值。

<!DOCTYPE html> 
<html> 
      
<head> 
      
    <title> 
        HTML DOM Style transform Property 
    </title> 
      
    <!-- script to use Style transform Property -->
    <script> 
        function myGeeks() { 
            document.getElementById("GFG").style.transform 
                    = "skew(30deg, 30deg)";  
        } 
    </script> 
  
    <!-- CSS style to create div element -->
    <style>  
        #GFG { 
            margin:70px; 
            border:1px solid black; 
            width:220px; 
            height:80px; 
            background-color:#0f9d58; 
            text-align:center; 
            color:white; 
        } 
    </style> 
</head> 
  
<body> 
    <button onclick = "myGeeks()"> 
        Click Here! 
    </button> 
      
    <div id = "GFG"> 
        <h1>GeeksforGeeks</h1> 
    </div> 
</body> 
  
</html>

输出：

之前单击按钮：
单击按钮后：

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

谷歌浏览器36.0
Internet Explorer 10.0，9.0毫秒
Firefox 16.0
Opera 23.0

相关用法

注：本文由纯净天空筛选整理自Shahnawaz_Ali大神的英文原创作品 HTML | DOM Style transform Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。