This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Thetransform-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 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 |
flatpreserve-3dflat | preserve-3d
| Specification | Status | Comment |
|---|---|---|
| CSS Transforms Level 2 The definition of 'transform-style' in that specification. | Editor's Draft | Initial definition. |
| 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 | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | 3 -webkit- | ? |
Yes Yes -webkit- |
16 10 -moz- 49 -webkit- |
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.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style