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. 31u59

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.

The following CSS property values require the 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);
}