HTML | DOM Style transform Property

The style transform property in HTML DOM is used to transform the object. The transform property allows to rotate, scale, move, skew, etc of an element. It can use 2D or 3D transformation.

Syntax:

  • It returns the transform property.
    object.style.transform
  • It is used to set the transform property.
    object.style.transform = "none|transform-functions|initial|
    inherit"

Property Values:



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.

Example 1: This example describes the rotation of an element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

  • Before Click on the button:
  • After Click on the button:
  • Example 2: This example describes the skew property value.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    Output:

    • Before Click on the button:
    • After Click on the button:

    Supported Browsers: The browser supported by DOM Style transform property are listed below:

    • Google Chrome 36.0
    • Internet Explorer 10.0, 9.0 msTransform
    • Firefox 16.0
    • Opera 23.0


    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :
    Practice Tags :


    4


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.