CSS3 3D Transform Style Property

Here is the brief description of how to specify, how the nested elements are rendered in 3D space in CSS3 using the CSS3 transform-style property.

Explanation

Property :

transform-style: flat|preserve-3d|initial|inherit;


Where,
flat - Specifies that child elements will NOT preserve its 3D position.
preserve-3d - Specifies that child elements will preserve its 3D position.
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.

Usage:


transform-style: preserve-3d;

Definition:

The transform-style property specifies how nested elements are rendered in 3D space.
Note: This property must be used together with the transform property.

Example :
<style>
#div1 {
border: 2px solid grey;
height: 100px;
padding: 5px;
position: relative;
width: 120px;
}
#div2 {
background-color: yellow;
padding: 15px;
position: absolute;
transform: rotateY(60deg);
transform-style: preserve-3d;
}
#div3 {
background-color: green;
padding: 20px;
position: absolute;
transform: rotateY(-60deg);
}
</style>
<br> <div id="div1">
<div id="div2">YELLOW
<div id="div3">GREEN</div>
</div>
</div>

Result:

YELLOW
GREEN



Ask Questions

Ask Question