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
打印页面
上一页
下一页
广告