CSS3 transform-style Property

Example

Let the transformed child elements preserve the 3D transformations:

div {
    -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotateY(60deg);
    transform-style: preserve-3d;
}

Try it yourself »

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

Browser Support

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-	4.0 -webkit-	23.0 15.0 -webkit-

CSS Syntax

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

Property Values

Property Value	Description
flat	Default value. The child elements will NOT preserve its 3D position
preserve-3d	The 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