CSS3 transform-style property
Let the child elements of the transformation retain the 3D transformation:
Div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
Try it out . . .
Browser support
The numbers in the table support the first browser version number of the property.
The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports the prefix property.
| Attributes | |||||
|---|---|---|---|---|---|
| transform-style |
36.0
12.0 -webkit- |
11.0 |
16.0
10.0 -moz- |
9.0
4.0 -webkit- |
23.0
15.0 -webkit- |
Description of property definition and use
The transform-style property specifies how nested elements are rendered in 3D space.
Note: You must first use the transform property to use this property.
Safari/Chrome users: To better understand the transform-style property, check out the instance demo .
| Default: | flat |
|---|---|
| Inherited: | no |
| Version: | CSS3 |
| JavaScript syntax: | object.style.transformStyle="preserve-3d" |
Grammar
transform-style: flat|preserve-3d;
| Value | Describe |
|---|---|
| flat | Child elements will not retain their 3D position. |
| preserve-3d | The child element retains its 3D position. |