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 an element are positioned in the 3D-space or are flattened in the plane of the element.

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

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

If flattened, the element's 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.

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 are lying in the plane of the element itself.
Indicates that the children of the element should be positioned in the 3D-space.

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


FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support12 -webkit-


12 -webkit-


10 -moz-

49 -webkit-

44 -webkit- 1

No15 -webkit- Yes -webkit-
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support3 -webkit- ?


Yes -webkit-


10 -moz-

49 -webkit-

44 -webkit- 1

Yes -webkit- Yes -webkit- ?

1. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

See also

Document Tags and Contributors

Last updated by: Sheppy,