CSS transform-style Property

Let the transformed child elements preserve the 3D transformations:

div {
transform: rotateY(60deg);
transform-style: preserve-3d;
}

Definition and Usage

The transform-style property specifies how nested elements are rendered in 3D space.

Note: This property must be used together with the transform property.

To better understand the transform-style property, view a demo.

Default value:	flat
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.transformStyle="preserve-3d" Try it

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
transform-style	36.0 12.0 -webkit-	11.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-

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

Property Value	Description
flat	Specifies that child elements will NOT preserve its 3D position. This is default
preserve-3d	Specifies that child elements will preserve its 3D position
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit