HTML - DOM Style 物件 transform 屬性

上一頁
下一頁

HTML DOM Style 物件的 **transform** 屬性用於應用 2D 或 3D 變換來轉換物件。它允許我們使用矩陣、傾斜、平移、旋轉、縮放屬性來轉換物件或元素。

語法

設定 transform 屬性 
object.style.transform= "none | transform-functions | initial | inherit";
獲取 transform 屬性 
object.style.transform;

屬性值

值 描述
none 這是預設值，表示不進行任何轉換。
matrix(x, x, x, x, x, x) 它指定一個 2D 矩陣變換。它接受六個值作為輸入。
matrix3d(x, x, x, x,..,x) 它指定一個 3D 矩陣變換。它使用一個 4x4 矩陣，包含 16 個值。
translate(x, y) 它指定一個 2D 平移。
translate3d(x, y, z) 它指定一個 3D 平移。
translateX(x) 它僅指定一個方向上的平移，即沿 X 軸。
translateY(y) 它僅指定一個方向上的平移，即沿 Y 軸。
translateZ(z) 它僅指定一個沿 Z 軸的 3D 平移。
rotate(angle) 它使用引數中提供的角度指定一個 2D 旋轉。
rotate3D(angle) 它指定一個 3D 旋轉。
rotateX(angle) 它僅指定一個沿 X 軸的 3D 旋轉。
rotateY(angle) 它僅指定一個沿 Y 軸的 3D 旋轉。
rotateZ(angle) 它僅指定一個沿 Z 軸的 3D 旋轉。
scale(x, y) 它指定一個 2D 縮放變換。
scale3d(x, y, z) 它指定一個 3D 縮放變換。
scaleX(x) 它僅指定一個方向上的縮放變換，即沿 X 軸。
scaleY(y) 它僅指定一個方向上的縮放變換，即沿 Y 軸。
scaleZ(z) 它僅指定一個方向上的縮放變換，即沿 Z 軸。
skew(angle, angle) 它指定一個沿 X 和 Y 軸的 2D 傾斜變換。
skewX(angle) 它指定一個沿 X 軸的 2D 傾斜變換。
skewY(angle) 它指定一個沿 Y 軸的 2D 傾斜變換。
perspective(x) 它為 3D 變換的元素指定一個透視檢視。
initial 它用於將此屬性設定為其預設值。
inherit 它用於繼承其父元素的屬性。

返回值

它返回一個字串值，表示元素的 transform 屬性。

HTML DOM Style 物件“transform”屬性示例

以下示例說明了 div 元素的不同變換屬性，如平移、縮放、旋轉、傾斜和矩陣。

將矩陣變換屬性應用於 div 元素

以下示例將矩陣和 matrix3D 變換屬性應用於 div 元素。

<!DOCTYPE html>]
<html lang="en">
<head>
    <title>
        HTML DOM Style Object transform Property
    </title>
    <style>
        #transform {
            border: 1px solid rgb(77, 73, 73);
            width: 200px;
            height: 50px;
            padding: 5px;
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <button onclick="fun()">
        2D Matrix
    </button>
    <button onclick="funTwo()">
        3D Matrix
    </button>
    <br><br><br>
    <br><br><br><br>
    <div id="transform">
        <p>
            Welcome To Tutorials Point.
        </p>
    </div>
    <script>
        function fun() {
            document.getElementById("transform")
                .style.transform = "matrix(0, 1, 1, 0, 0, 0)";
        }
        function funTwo() {
            document.getElementById("transform").style.transform = 
            "matrix3d(0.5,0,0.8,0,0.6,1.2,-1,0,1,0,0.5,0,30,0,10,1)";
        }
    </script>
</body>
</html>

將平移變換屬性應用於 div 元素

以下示例將平移和 translate3D 變換屬性應用於 div 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object transform Property
    </title>
    <style>
        #transform {
            border: 1px solid rgb(77, 73, 73);
            width: 200px;
            height: 50px;
            padding: 5px;
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <p>
        Click to apply Translation.
    </p>
    <button onclick="fun()">
        2D Translate
    </button>
    <button onclick="translateThreeD()">
        3D Translate
    </button>
    <button onclick="translateX()">
        Translate X
    </button>
    <button onclick="translateY()">
        Translate Y
    </button>
    <button onclick="funTwo()">
        Translate Z
    </button>
    <div id="transform">
        <p>
            Welcome To Tutorials Point.
        </p>
    </div>
    <script>
        function fun() {
            document.getElementById("transform")
                .style.transform = "translate(100px, 15px)";
        }
        function translateThreeD() {
            document.getElementById("transform")
                .style.transform = "translate3D(25px, 15px, 40px)";
        }
        function translateX() {
            document.getElementById("transform")
                .style.transform = "translateX(40px)";
        }
        function translateY() {
            document.getElementById("transform")
                .style.transform = "translateY(50px)";
        }
        function funTwo() {
            document.getElementById("transform")
                .style.transform = "translateZ(80px)";
        }
    </script>
</body>
</html>

將旋轉變換屬性應用於 div 元素

以下示例將旋轉和 rotate3D 變換屬性應用於 div 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object transform Property
    </title>
    <style>
        #transform {
            border: 1px solid rgb(77, 73, 73);
            width: 200px;
            height: 50px;
            padding: 5px;
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <p>
        Click to rotate.
    </p>
    <button onclick="fun()">
        2D Rotate
    </button>
    <button onclick="rotateThreeD()">
        3D Rotate
    </button>
    <button onclick="rotateX()">
        Rotate X
    </button>
    <button onclick="rotateY()">
        Rotate Y
    </button>
    <button onclick="funTwo()">
        Rotate Z
    </button>
    <div id="transform">
        <p>
            Welcome To Tutorials Point.
        </p>
    </div>
    <script>
        function fun() {
            document.getElementById("transform")
                .style.transform = "rotate(40deg)";
        }
        function rotateThreeD() {
            document.getElementById("transform")
                .style.transform = "rotate3D(1, 1, 1, 30deg)";
        }
        function rotateX() {
            document.getElementById("transform")
                .style.transform = "rotateX(45deg)";
        }
        function rotateY() {
            document.getElementById("transform")
                .style.transform = "rotateY(45deg)";
        }
        function funTwo() {
            document.getElementById("transform")
                .style.transform = "rotateZ(80deg)";
        }
    </script>
</body>
</html>

將縮放變換屬性應用於 div 元素

以下示例將縮放和 scale3D 變換屬性應用於 div 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object transform Property
    </title>
    <style>
        #transform {
            border: 1px solid rgb(77, 73, 73);
            width: 200px;
            height: 50px;
            padding: 5px;
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <p>
        Click to scale.
    </p>
    <button onclick="fun()">
        2D Scale
    </button>
    <button onclick="scaleThreeD()">
        3D Scale
    </button>
    <button onclick="scaleX()">
        Scale X
    </button>
    <button onclick="scaleY()">
        Scale Y
    </button>
    <button onclick="funTwo()">
        Scale Z
    </button>   
    <br><br><br>
    <br><br><br><br>
    <div id="transform">
        <p>
            Welcome To Tutorials Point.
        </p>
    </div>
    <script>
        function fun() {
            document.getElementById("transform")
                .style.transform = "scale(3, 2)";
        }
        function scaleThreeD() {
            document.getElementById("transform")
                .style.transform = "scale3D(3, 2, 2)";
        }
        function scaleX() {
            document.getElementById("transform")
                .style.transform = "scaleX(3)";
        }
        function scaleY() {
            document.getElementById("transform")
                .style.transform = "scaleY(3)";
        }
        function funTwo() {
            document.getElementById("transform")
                .style.transform = "scaleZ(2)";
        }
    </script>
</body>
</html>

將傾斜變換屬性應用於 div 元素

以下示例將傾斜變換屬性應用於 div 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object transform Property
    </title>
    <style>
        #transform {
            border: 1px solid rgb(77, 73, 73);
            width: 200px;
            height: 50px;
            padding: 5px;
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <p>
        Click to apply skew transformation.
    </p>
    <button onclick="fun()">
        2D skew
    </button>
    <button onclick="skewX()">
        skew X
    </button>
    <button onclick="skewY()">
        skew Y
    </button>
    <div id="transform">
        <p>
            Welcome To Tutorials Point.
        </p>
    </div>
    <script>
        function fun() {
            document.getElementById("transform")
                .style.transform = "skew(10deg, 15deg)";
        }
        function skewX() {
            document.getElementById("transform")
                .style.transform = "skewX(45deg)";
        }
        function skewY() {
            document.getElementById("transform")
                .style.transform = "skewY(25deg)";
        }
    </script>
</body>
</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
transform 是 36 是 12 是 16 是 9 是 23
html_dom_style_object_reference.htm
列印頁面
上一頁
下一頁
廣告