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 value | flat |
---|---|
Applies to | transformable elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Creates stacking context | yes |
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
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 12 -webkit- | Yes Yes -webkit- | 16 10 -moz- 49 -webkit- | No | 15 -webkit- | Yes -webkit- |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 3 -webkit- | ? | Yes Yes -webkit- | 16 10 -moz- 49 -webkit- | 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.