HTML and CSS Reference
In-Depth Information
transform-style
This property is used to define how nested items are rendered in a 3-D space, the choice
being either flattened or with their dimensions preserved. This property affects the children
of the element and not the element itself. Also, the property does not cascade, so it is
necessary to apply it at all levels.
Syntax
transform-style: flat | preserve-3d
where the default value is flat , indicating that all children elements will be flattened into
the 2-D plane. If the value is set to preserve-3d , then the children would preserve their
dimensions.
Examples
<div style="height:200px;width:200px;background-color:red;
-webkit-perspective:200;">
Perspective set
<div style="height:100px;width:100px;background-color:blue;
-webkit-transform:rotateY(55deg);-webkit-transform-style:
preserve-3d;">
preserve-3d
<div style="height:60px;width:50px;background-color:green;
-webkit-transform: rotateY(25deg);">
preserved
</div>
</div>
</div>
<div style="height:200px;width:200px;background-color:red;
-webkit-perspective:200;">
Perspective set
<div style="height:100px;width:100px;background-color:blue;
-webkit-transform:rotateY(55deg);-webkit-transform-style:flat;">
flat
<div style="height:60px;width:50px;background-color:green;
-webkit-transform: rotateY(25deg);">
flat
</div>
</div>
</div>
Search WWH ::




Custom Search