Search within TutorialsPark

CSS3 transform-style Property


To display objects in 3d space


Definition and Notes.

1. The CSS transform-style property is used specify how an element transformed in simulated 3D space should have its child elements displayed, using either a flat-style or 3D effects.

2. The 3D effects are applied by having positive or negative z-index values. Elements with overflow value set as hidden cannot preserve 3D effects and are displayed as flat


Syntax:

CSS transform-style property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note-The value of transform-style affects the children and not the element to which it was applied

Property Values

Value Description
flat Applies 3D transform only on 2D plane. Its the default
preserve-3d Applies 3D transform in 3D plane, creating an illusion of depth.

Specifications

Specs Value
Name transform-style
Value flat | preserve
Initial Value flat
Applies to Block and inline-level Elements
Javascript syntax object.style.transformStyle="preserve-3d"
Inherited No
Computed Value Same as declared Value
Browser Support internetexplorer safari firefox opera chrome

Related Examples.