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
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes

Syntax

Values

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

Formal syntax

flat | preserve-3d

Specifications

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-

Yes

Yes -webkit-

16

10 -moz-

49 -webkit-

44 -webkit- 1

No15 -webkit- Yes -webkit-
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support3 -webkit- ?

Yes

Yes -webkit-

16

10 -moz-

49 -webkit-

44 -webkit- 1

No 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: fscholz,