Latest web development tutorials
 

Style transformStyle Property

< Style Object

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

Internet Explorer Firefox Opera Google Chrome Safari

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