HTML | DOM Style transformStyle Property
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> |
Output:
- Before clicking on the button:
- After clicking on the button:
Note: Internet Explorer does not support this property.
Browsers Support: The browsers supported by DOM style transformStyle property are listed below:
- Google Chrome 36 and above
- Edge 12 and above
- Firefox 16 and above
- Opera 23 and above
- Safari 9 and above
Please Login to comment...