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