This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The transform-style CSS property determines if the children of the element are positioned in the 3D-space or are flattened in the plane of the element.

If flattened, the children will not exist on their own in the 3D-space.

As this property is not inherited, it must be set for all non-leaf descendants of the element.

/* Keyword values */
transform-style: preserve-3d;
transform-style: flat;

/* Global values */
transform-style: inherit;
transform-style: initial;
transform-style: unset;

Initial valueflat
Applies totransformable elements
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes



Indicates that the children of the element should be positioned in the 3D-space.
Indicates that the children of the element are lying in the plane of the element itself.

Formal syntax

flat | preserve-3d


Specification Status Comment
CSS Transforms Level 2
The definition of 'transform-style' in that specification.
Editor's Draft Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 12-webkit (Yes)-webkit
10 (10)-moz
16 (16)[1]
No support 15-webkit (Yes)-webkit
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0-webkit (Yes)-webkit
10.0 (10)-moz
16.0 (16)[1]
No support (Yes)-webkit (Yes)-webkit

[1] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

See also

Document Tags and Contributors

 Last updated by: mfluehr,