CSS3 transform-style Property

Example

Let the transformed child elements preserve the 3D transformations:

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

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The transform-style property is not supported in any browser.

Safari supports an alternative, the -webkit-transform-style property.


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.

For Safari users: To better understand the transform-style property, view a demo.

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


Syntax

transform-style: flat|preserve-3d;

Property Value Description
flat The child elements will NOT preserve its 3D position
preserve-3d The child elements will preserve its 3D position