Transform-style - Property CSS

transform-style

Summary of characteristics of the transform-style property

Quick description
Defines how elements that undergo a 3D transformation are rendered.
Status
Standard
Applies to
Transformable elements
Usable for
HTML, SVG
Predefined values
flat | preserve-3d
Percentages
Not applicable.
Initial value
flat
Inherited by default
No.
Animation type
Discrète: during an animation, the transform-style property passes from one value to another without transition.
Canonical order
Single: single value (no order).
W3C Module
CSS Transforms Module
References (W3C)
Document status: WD (Working Draft)

Syntax diagram of transform-style.

transform-style - Syntax DiagramSyntax diagram of the transform-style CSS property. flat flat preserve-3d preserve-3dtransform-style:;transform-style:;
Syntax diagram of the transform-style property.
The links in the diagram provide more details about the values.

Description of the transform-style property.

The property transform-style defines how the children of the element behave when the latter undergoes a 3D transformation. More specifically, transform-style} defines whether the children of the element have their own 3D space or whether they are always in the same plane as the parent.

In the example below, the parent element is in blue, and the child element is in green. The latter has been rotated 45 degrees around the X-axis. This rotation has taken it out of the plane of its parent. This is clearly visible in the result, because the property transform-style has been set to the value preserve-3d.

Several other properties interfere with transform-style and force the children to stay in the parent's plane:

  • overflow: with a value different from visible or clip
  • opacity: when the opacity is less than 1 (semi-transparent or transparent element).
  • filter: as soon as a graphic filter is applied (blur, hue change, etc.)
  • clip: any value other than auto.
  • clip-path: any value other than none.
  • isolation: with the value isolate.
  • mask-image: any value other than none.
  • mask-border-source: any value other than none.
  • mix-blend-mode: any value other than normal.
  • contain: with the value paint.

Values for transform-style.

  • transform-style: flat;

    Default value. Child elements do not have their own 3D space: they can only remain in the same plane as the parent element.

    transform-style:flat;
  • transform-style: preserve-3d;

    The child elements have their own 3D space, which allows for more realistic rendering of 3D effects.

    transform-style:preserve-3d;
  • transform-style: initial; (flat) transform-style: inherit; transform-style: revert; transform-style: revertLayer; transform-style: unset;

    See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Animation of the transform-style property.

The example below is made up of a blue element (the parent), containing a green element (which is therefore its child). The parent has been rotated around the X axis by 60 degrees, while the child element has been moved up (Z axis) by 30 pixels.

The animation is done on the property transform-style. When the latter takes the value flat, the offset of the green element no longer appears: the child element remains confined to the plane of its parent.

Simulator.

The simulator below shows two constructions, each made up of a parent element (blue) containing a child element (green). In flat mode, it is impossible to see the transformations that have been applied to the child element, because it remains in the parent's plane and rotates with it. In the first example, the child element is even invisible because it has been rotated 90° around the vertical axis (Y).
In preserve-3d mode, one can see the transformations that have been applied to each of the child elements.

transform-style :

Browsers compatibility with transform-style.

All recent browsers correctly handle the property transform-style.

Column 1
General support for 2D transformations, including rotations, element translations, and more
Column 2
General support for 3D animations, including support for perspective management and support for the backface-visibility property.
Column 3
Support by browsers of the property transform-style which defines how the children of a 3D transformed element behave.

Notes:

(1) Does not support 2D transformations on SVG elements. Use the transform attribute instead.

(2) Internet Explorer does not support transform-style:preserve-3d, thus limiting the nesting of animations.

1
2D
transformations
2
3D
transformations
3
transform-style
property
Estimated overall support.
97%
97%
95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1
2

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse
Caniuse

Historic of the transform-style property.

  • CSS Transforms Module Level 2

    In addition to the 2D transformations already presented in level 1 of the specification, this module deals with 3D transformations. It introduces new properties to manage the viewpoint height and the rendering of 3D effects.
    This module also introduces the individual properties of rotation, translation, and zoom effect.

    Regarding transform-style. This level of the specification introduces 3D transformations.
    Adding transform-style property.
    WD
    March 03, 2020
    Working Draft.
    CR
    PR
    REC

See also, regarding the transformations.

LThe CSS Transforms Module describes the property transform-style, and also includes all definitions concerning CSS transformations:

Properties:

backface-visibility
Visibility of the rear side of the element (while it is rotating).
perspective
A perspective effect applied to a 3D transformed element.
perspective-origin
Langue française
Position of the observer in the case of a 3D distortion with perspective.
rotate
Defines a rotation to apply to the element.
scale
Sets a scaling of the element (magnification or shrinking).
transform
Applies one or more geometric transformations (rotations, enlargements, etc.).
transform-box
Sets the reference box for transformations.
transform-origin
Sets the origin point for transformations.
Transform-style
Defines how elements that undergo a 3D transformation are rendered.
translate
Applies a translation to an element (a linear displacement).

Functions:

matrix()
Applies a composite transformation to an element (translations, rotations...).
matrix3d()
Langue française
Applies a series of 3D transformations to an element.
perspective()
Langue française
Sets the height of the observer in the case of a 3D transformation.
rotate()
Sets a rotation to apply to the element in 2D (in the plane of the screen).
rotate3d()
Defines a 3D rotation to be applied to an element around any axis in 3D.
rotateX()
Defines a rotation of the element around the X-axis (in 3D),
rotateY()
Sets a 3D rotation of the element around the y-axis.
rotateZ()
Sets a rotation of the element around the z-axis.
scale()
Sets a magnification or reduction of the element.
scale3d()
Sets 3D scaling.
scaleX()
Sets X-axis scaling.
scaleY()
Set Y-axis scaling.
scaleZ()
Set Z-axis scaling.
skew()
Sets a tilt of the element along the X and/or Y axes.
skewX()
Sets a tilt of the element along the X-axis.
skewY()
Sets a tilt of the element along the Y-axis.
translate()
Defines a translation (a linear move) to an element.
translate3d()
Defines a 3D translation along one or more of the X, Y, and Z axes.
translateX()
Defines a translation along the X-axis (horizontally).
translateY()
Defines a translation along the Y axis (vertically).
translateZ()
Defines a translation along the Z axis (perpendicular to the screen).