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.

 .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); }