CSS3 `transform-style` Property

Example

Preserve 3D transformations for transformed child elements:

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

Browser Support

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

Numbers followed by -webkit-, -ms-, or -moz- specify the first version that supported the prefixed property.

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

Property Definition and Usage

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

Note: This property must be used in conjunction with the transform property.

Safari/Chrome Users: To better understand the transform-style property, please see the demo.

Default value:	flat
Inherited:	no
---	---
Version:	CSS3
---	---
JavaScript syntax:	object.style.transformStyle="preserve-3d"
---	---

Syntax

Value	Description
flat	Indicates that child elements are rendered flat in 2D space.
preserve-3d	Indicates that child elements are rendered in 3D space.

❮ Pr Margin Left Pr Padding Left ❯

CSS3 transform-style Property

Example

Browser Support

Property Definition and Usage

Syntax

CSS3 `transform-style` Property