CSS transform-style Property
Description
The transform-style
property determines how nested (child) elements are displayed in three-dimensional space. By default, all child elements are displayed flat in the two-dimensional plane (they are in the plane of the element itself). To allow nested (child) elements to transform in their own three-dimensional plane, the preserve-3d value of the transform-style
property must be used.
- Initial value
- flat
- Applies to
- Transformable elements
- Inherited
- No
- Media
- Visual
- Computed value
- Same as specified value
- Animatable
- No
- CSS Version
- CSS3
- JavaScript syntax
- object.style.transformStyle
Syntax
transform-style: flat | preserve-3d
Values
- flatChild elements will not preserve their 3D position before applying a transform.
- preserve-3dChild elements will preserve their 3D position before applying a transform.
Example
<div class="static">
<b>transform-style: flat;</b>
<div class="test">
<div class="test2"></div>
</div>
</div>
<div class="static">
<b>transform-style: preserve-3d;</b>
<div class="test3">
<div class="test2"></div>
</div>
</div>
div {
width: 200px;
height: 200px;
border: 1px solid white;
}
.static {
display: inline-block;
background: silver;
margin: 50px;
-webkit-perspective: 500px;
-moz-perspective: 500px;
perspective: 500px;
}
@ -webkit-keyframes iliketomoveit {
100% {
-moz-transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
} @keyframes iliketomoveit {
100% {
-moz-transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
.test {
-webkit-animation: iliketomoveit 15s linear infinite;
animation : iliketomoveit 15s linear infinite;
background: green;
transform-style: flat;
}
.test2 {
-webkit-animation: iliketomoveit 15s linear infinite;
animation: iliketomoveit 15s linear infinite;
background: orange;
}
.test3 {
-webkit-animation: iliketomoveit 15s linear infinite;
animation: iliketomoveit 15s linear infinite;
background: green;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
Browser Support
Desktop | |||||
X | 12 | 36 | 16 | 23 | 9 |
Tablets / Mobile | |||||
![]() |
|||||
4.4 | 36 | 16 | 24 | 9 | 3.0 |
Last updated by CSSPortal on: 2nd November 2019