CSS transform-style attribute

Definition and Usage

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

Note:This property must be used with transform used together with other properties.

See Also:

CSS3 Tutorial:CSS3 2D transformation

CSS3 Tutorial:CSS3 3D transformation

HTML DOM Reference Manual:transformStyle Property

Example

Make the transformed child elements retain their 3D transformation:

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

Try It Yourself

CSS Syntax

transform-style: flat|preserve-3d;

Attribute Value

Value Description
flat Child elements will not retain their 3D position.
preserve-3d Child elements will retain their 3D position.

Technical Details

Default Value: flat
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.transformStyle="preserve-3d"

Browser Support

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

Numbers with -webkit- or -moz- prefixes indicate the first version using the prefix.

Chrome IE / Edge Firefox Safari Opera
36.0
12.0 -webkit-		 11.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-