Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM Style transformStyle Property

  • Last Updated : 02 Aug, 2019

The transformStyle property is used to set or return, the different ways nested elements use for their rendering in 3D space.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • It return transformStyle:
    object.style.transformStyle
  • It set transformStyle:
    object.style.transformStyle = "flat|preserve-3d|initial|inherit"

Properties:

  • flat: It is the default property value. However, the 3D position is not preserved by the child elements.
  • preserve-3d: It enables the child elements to preserve their 3D position.
  • initial: It sets the transformStyle to it’s default value.
  • inherit: It inherits the transformStyle property values of the parent element.

Return Value: It returns a string, representing the transform-style property of the element.



Example-1: Showing Flat Property.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style transformStyle Property
    </title>
    <style>
        #DIV1 {
            padding: 0.4px;
            position: absolute;
            border: 1px solid black;
            background-color: green;
            -webkit-transform: rotateY(100deg);
            transform: rotateY(50deg);
        }
          
        #DIV2 {
            padding: 5px;
            position: absolute;
            border: 1px solid black;
            background-color: lightgreen;
            -webkit-transform: rotateY(0deg);
            transform: rotateY(100deg);
        }
    </style>
</head>
  
<body>
    <h1>
      <center>
        Geeks 
        <button onclick="gfg()">
          Press
        </button>
      </center
    </h1>
  
    <h4>
      Clicking on the 'Press' button 
      will set the property to flat.
    </h4>
  
    <div id="DIV1">
        <h2>GeeksforGeeks</h2>
        <div id="DIV2">
            <h1>12345</h1>
        </div>
    </div>
  
    <script>
        function gfg() {
  
            //  Set transform style for Apple Safari.
            document.getElementById(
                "DIV1").style.WebkitTransformStyle = "flat";
  
            //  Set "falt" transform style.
            document.getElementById(
                "DIV2").style.transformStyle = "flat";
        }
    </script>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

Example-2: Showing Preserve 3D Property.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style transformStyle Property
    </title>
  
    <style>
        #DIV1 {
            padding: 0.4px;
            position: absolute;
            border: 1px solid black;
            background-color: green;
            -webkit-transform: rotateY(100deg);
            transform: rotateY(50deg);
        }
          
        #DIV2 {
            padding: 5px;
            position: absolute;
            border: 1px solid black;
            background-color: lightgreen;
            -webkit-transform: rotateY(0deg);
            transform: rotateY(100deg);
        }
    </style>
</head>
  
<body>
    <h1>
       <center>
         Geeks 
         <button onclick="gfg()">
           Press
         </button>
      </center
    </h1>
  
    <h4>
      Clicking on the 'Press' button 
      will set the property to preserve 3D.
    </h4>
  
    <div id="DIV1">
        <h2>GeeksforGeeks</h2>
        <div id="DIV2">
            <h1>12345</h1>
        </div>
    </div>
  
    <script>
        function gfg() {
  
            // Set Transform style property for Apple Safari.
            document.getElementById(
                    "DIV1").style.WebkitTransformStyle =
                "preserve-3d";
  
            //  Set "preserve-3d"
            document.getElementById(
                    "DIV2").style.transformStyle =
                "preserve-3d";
        }
    </script>
</body>
  
</html>

Output:

  • Before clicking on the button:

Example-3: Showing Initial Property.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style transformStyle Property
    </title>
    <style>
        #DIV1 {
            padding: 0.4px;
            position: absolute;
            border: 1px solid black;
            background-color: green;
            -webkit-transform: rotateY(100deg);
            transform: rotateY(50deg);
        }
          
        #DIV2 {
            padding: 5px;
            position: absolute;
            border: 1px solid black;
            background-color: lightgreen;
            -webkit-transform: rotateY(0deg);
            transform: rotateY(100deg);
        }
    </style>
  
    <body>
        <h1>
           <center>
             Geeks 
             <button onclick="gfg()">
               Press
             </button>
           </center
         </h1>
  
         <h4>
          Clicking on the 'Press' button 
          will set the property to initial.
         </h4>
  
         <div id="DIV1">
            <h2>GeeksforGeeks</h2>
            <div id="DIV2">
                <h1>12345</h1>
            </div>
         </div>
  
        <script>
            function gfg() {
  
                //  Set Transform style property for Apple Safari
                document.getElementById(
                        "DIV1").style.WebkitTransformStyle =
                    "initial";
  
                //  Set "initial" Transform style
                document.getElementById(
                        "DIV2").style.transformStyle =
                    "initial";
            }
        </script>
  
    </body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

Example-4: Showing Inherit Property.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style transformStyle Property
    </title>
    <style>
        #DIV1 {
            padding: 0.4px;
            position: absolute;
            border: 1px solid black;
            background-color: green;
            -webkit-transform: rotateY(100deg);
            transform: rotateY(50deg);
        }
          
        #DIV2 {
            padding: 5px;
            position: absolute;
            border: 1px solid black;
            background-color: lightgreen;
            -webkit-transform: rotateY(0deg);
            transform: rotateY(100deg);
        }
    </style>
  
</head>
  
<body>
    <h1>
      <center>Geeks 
        <button onclick="gfg()">
          Press
        </button>
      </center>
    </h1>
  
    <h4>
      Clicking on the 'Press' button 
      will set the property to inherit.
    </h4>
  
    <div id="DIV1">
        <h2>GeeksforGeeks</h2>
        <div id="DIV2">
            <h1>12345</h1></div>
    </div>
  
    <script>
        function gfg() {
  
            // Set Transform property for Apple Safari.
            document.getElementById(
                    "DIV1").style.WebkitTransformStyle =
                "inherit";
  
            //  Set "inherit" transform property.
            document.getElementById(
                    "DIV2").style.transformStyle =
                "inherit";
        }
    </script>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

Note: Apple Safari does not support this property.

Browser Support: The browsers supported by DOM style transformStyle property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera



My Personal Notes arrow_drop_up
Recommended Articles
Page :