CSS3 transform-style Property


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.

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 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

Related Pages

CSS tutorial: CSS 2D Transforms

CSS tutorial: CSS 3D Transforms

HTML DOM reference: transformStyle property




Search w3schools.com:

Translate w3schools.com: