The transform-style defines how child elements are rendered in 3D space.
Child elements can be positioned in 3D space or they can be flattened.
This setting only applies to elements that take part in 3D transformations.
Two nested and 3D rotated <div> elements.
The elements are styled to preserve their 3D relationship.
<style>
.transform-parent {
height: 200px;
padding: 10px;
background-color: lightblue;
transform: rotateY(60deg);
transform-style: preserve-3d;
}
.transform-child {
width: 300px;
padding: 50px;
text-align: right;
background-color: mediumslateblue;
color: white;
transform: rotateY(-20deg);
}
</style>
<div class="transform-parent">
Parent 60deg rotate
<div class="transform-child">
Child<br />-20deg<br />rotate
</div>
</div>
transform-style: flat | preserve-3d | initial | inherit;
| Value | Description |
|---|---|
flat |
Default. Child elements do not preserve their 3D position and are displayed flattened. |
preserve-3d |
Child elements preserve their 3D positioning. |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
This table shows when transform-style support started for each browser.
 Chrome
|
36.0 | Jul 2014 |
 Firefox
|
16.0 | Oct 2012 |
 IE/Edge
|
11.0 | Oct 2013 |
 Opera
|
23.0 | Jul 2013 |
 Safari
|
9.0 | Sep 2015 |
