W3cubDocs

transform-style

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The transform-style CSS property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.

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.

Syntax

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

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

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.

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

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	12 Prefixed 12 Prefixed Prefixed Requires the vendor prefix: -webkit-	12 12 12 Prefixed Prefixed Requires the vendor prefix: -webkit-	16 16 10 Prefixed Prefixed Requires the vendor prefix: -moz- 49 Prefixed Prefixed Requires the vendor prefix: -webkit- 44 Prefixed Disabled Prefixed Requires the vendor prefix: -webkit- Disabled 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.	No	15 Prefixed 15 Prefixed Prefixed Requires the vendor prefix: -webkit-	Yes Prefixed Yes Prefixed Prefixed Requires the vendor prefix: -webkit-