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

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

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu