CSS transform-style Property

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

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

<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

The following table will show you the current browser support for the CSS transform-style property.

Desktop
Edge Chrome Firefox Opera Safari
123616239
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
361624934.4

Last updated by CSSPortal on: 2nd January 2024