CSS3 transform-style Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The transform-style CSS property specifies whether the children of the element are positioned in the 3D-space or are flattened in the plane of the element. If flattened, the child elements will not exist on their own in the 3D-space.
This property is only applied to child elements that have a transform property specified.
The following table summarizes the usages context and the version history of this property.
| Default value: | flat |
|---|---|
| Applies to: | Transformable elements |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the transform-style property in action.
Example
Try this code »img {
/* Chrome, Safari, Opera */
-webkit-transform: rotate(30deg);
-webkit-transform-style: preserve-3d;
/* Firefox */
-moz-transform: rotate(30deg);
-moz-transform-style: preserve-3d;
/* IE 9 */
-ms-transform: rotate(30deg);
-ms-transform-style: preserve-3d;
/* Standard syntax */
transform: rotate(30deg);
transform-style: preserve-3d;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
flat |
The children of the element are flattened i.e. lying in the plane of the element itself. This is default value. |
preserve-3d |
The children of the element should be positioned in the 3D-space. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element transform-style property. |
Browser Compatibility
The transform-style property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS3 2D Transforms, CSS3 3D Transforms
Related properties: backface-visibility, perspective, perspective-origin, transform, transform-origin.
