MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey-2018-1

Our volunteers haven't translated this article into Deutsch yet. Join us and help get the job done!
You can also read the article in English (US).

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

Syntax

Values

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

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 AndroidOpera AndroidiOS SafariSamsung Internet
Basic support3 -webkit- ?

Yes

Yes -webkit-

16

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

Schlagwörter des Dokuments und Mitwirkende

 Zuletzt aktualisiert von: mfluehr,