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

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