CSS Reference Property


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


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


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:


  • 36
  • 16
  • 10
  • 23
  • 15

Mobile / Tablet

  • 15
  • 123
  • No
  • 123
  • 124

* 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 Manoela Ilic.

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