HTML | DOM Style transformStyle Property

Last Updated : 05 Jun, 2022

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

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.

html

<!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 "flat" 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.

html

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

html

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

html

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