Example
Let the transformed child elements preserve the 3D transformations:
document.getElementById("myDIV").style.transformStyle = "preserve-3d";
Try it Yourself »
Definition and Usage
The transformStyle property sets or returnd how nested elements are rendered in 3D space.
Note: This property must be used together with the transform property.
Browser Support
The transformStyle property is supported in Firefox.
Chrome, Safari, and Opera support an alternative, the WebkitTransformStyle property.
Syntax
Return the transformStyle property:
object.style.transformStyle
Set the transformStyle property:
object.style.transformStyle="flat|preserve-3d|initial|inherit"
Property Values
| Value | Description |
|---|---|
| flat | Default value. The child elements will NOT preserve its 3D position |
| preserve-3d | The child elements will preserve its 3D position |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | flat |
|---|---|
| Return Value: | A String, representing the transform-style property of an element |
| CSS Version | CSS3 |
Related Pages
JavaScript Style Object: transform property
CSS reference: transform-style property
< Style Object