transform-style

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.

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

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

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

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 1 The definition of 'transform-style' in that specification.	Working Draft	Initial definition

Browser compatibility

[1] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

See also

• Using CSS Transforms