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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。