CSS Reference Property

transform-style

The transform-style property determines whether the children of an element are positioned in three-dimensional space or flattened in the two-dimensional plane of the element.

It is mostly used when transforms are nested. That is, it can be used to preserve the three-dimensional space of an element that is transformed in its parent’s three-dimensional space. See the live demo section below for an example.

It takes one of two values: flat and preserve-3d. The value preserve-3d will allow the element’s children to be positioned in a three-dimensional space. The value flat, as the name suggests, will flatten the elements into their parent’s plane, not allowing them to be positioned along the z-axis.

A value other than preserve-3d establishes a stacking context.

Trivia & Notes

The following CSS property values require the user agent to create a flattened representation of the descendant elements before they can be applied, and therefore override the behavior of transform-style: preserve-3d:

  • overflow with any value other than visible.
  • filter with any value other than none.
  • clip with any value other than auto.
  • clip-path with any value other than none.
  • isolation with a used value of isolate.
  • mask-image with any value other than none.
  • mask-box-source with any value other than none.
  • mix-blend-mode with any value other than normal

So, if you want to position elements in three-dimensional space and have the transform-style property correctly set, make sure the container of the elements you want to transform does not have any of the above properties set with the mentioned values.

The transform-style property is not inherited. Hence, you should use it on any descendants whose children you want to be transformed in three-dimensional space.

Official Syntax

Values

flat
Flattens the children of the element so that they lie in the plane of the element itself.
preserve-3d
Allows the children of the element should be positioned in the three-dimensional space.

Examples

In the following example, the .element is transformed inside its .container. It has transform-style: preserve-3d set because its child (the img) is also positioned in three-dimensional space. You can see the live demo of this example in the live demo section below.

.container {
    /* activate 3D space */
    perspective: 800px;
}

.element {
    width: 100%;
    height: 400px;
    background-color: rgba(255, 255, 255, 0.8);
    /* transform */
    transform: rotateY(50deg);
    /* allow direct descendants to be transformed */
    transform-style: preserve-3d;
}

.element img {
    transform: rotateX(-30deg);
}
                

Live Demo

In the following demo, the image is set to animate its position in the three-dimensional space for a better view of how it moves in that space. Change the value of the preserve-3d property on the .element to flat to see how the image is forced to stay in the two-dimensional plane of its parent, preventing it from swinging in the three-dimensional space.

View this demo on the Codrops Playground

Please refer to the transform, transform-origin, and perspective entries for more information on how the demo works.

Browser Support

The following table shows the browser support for the transform-style property, including notes on partial support.

CSS3 3D Transforms

Method of transforming an element in the third dimension using the `transform` property. Includes support for the `perspective` property to set the perspective in z-space and the `backface-visibility` property to toggle display of the reverse side of a 3D-transformed element.

W3C Working Draft

Supported from the following versions:

Desktop

  • 36
  • 16
  • 10
  • 23
  • 9

Mobile / Tablet

  • 9.0
  • 56
  • No
  • 57
  • 52

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Further Reading

Written by

Last updated December 11, 2016 at 10:53 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.