CSS3 transform-style Property
Example
Let the converted child elements preserve 3D transformations:
div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
Try it Yourself »
Browser Support
The numbers in the table indicate the first browser version that supports the property.
The number immediately preceding -webkit-, -ms-, or -moz- is the first browser version that supports the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
Property definition and usage instructions
The transform-style property specifies how nested elements are rendered in three-dimensional space.
Note:To use this property, you must first usetransformproperty.
Safari/Chrome users:To better understand the transform-style property, please see the examplesdemonstration.
| Default value: | flat |
|---|---|
| Inherited: | no |
| version: | CSS3 |
| JavaScript Syntax: | object.style.transformStyle="preserve-3d" |
Syntax
transform-style: flat|preserve-3d;
| Value | Description |
|---|---|
| flat | Indicates that all child elements are rendered in the 2D plane. |
| preserve-3d | Indicates that all child elements are rendered in 3D space. |