CSS3 transform-style property
Examples
Let the child elements into reservations 3D conversion:
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"
Browser Support
Figures in the table represent the first browser to support the version number of the property.
Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.
属性 | |||||
---|---|---|---|---|---|
transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
Attribute definitions and instructions
transform - style attribute to specify how nested elements are rendered in three-dimensional space.
Note: This property must first transform property.
Safari / Chrome users: For a better understanding transform - style property, see the examples demonstrate .
Defaults: | flat |
---|---|
inherit: | no |
version: | CSS3 |
JavaScript syntax: | object .style.transformStyle = "preserve-3d" |
grammar
transform-style: flat | preserve-3d;
value | description |
---|---|
flat | Child elements will not retain its 3D position. |
preserve-3d | Child elements will retain its 3D position. |