CSS transform-style Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The transform-style CSS property is used to define how child elements of an HTML element with a 3D transform should be rendered in 3D space. It primarily affects elements within a 3D context created using the transform property. The property can take one of two values: flat (the default) and preserve-3d. When set to flat, child elements are flattened into the plane of their parent element, effectively disabling any 3D effects for those child elements. In contrast, when set to preserve-3d, the child elements maintain their 3D positioning relative to their parent, allowing for complex 3D transformations and interactions. This property is particularly useful when creating 3D scenes and ensuring proper rendering of elements in a 3D space.

Initial value: flat
Applies to: Transformable elements
Inherited: No
Computed value: Same as specified value
Animatable: No
JavaScript syntax: object.style.transformStyle

Interactive Demo

transform-style: flat;

transform-style: preserve-3d;

Parent

rotate3d(1, 1, 1, 45deg)

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

HTML

<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>

CSS

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; 
}

Result

Editor