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
Explorer Edge Chrome Firefox Opera Safari
X123616239
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
4.436162493.0

Last updated by CSSPortal on: 2nd November 2019