CSS transform-style: Let Children Live in 3D Space

Why it exists

Without a shared 3D space, every element with a 3D transform would exist in its own isolated world, making it impossible to build complex objects from multiple parts. transform-style was created to allow multiple elements to share a single, unified 3D coordinate system, enabling the construction of composite 3D scenes.

The mental model

Think of transform-style as setting the stage for a play. With flat (the default), each actor performs on their own tiny, separate platform, and their 3D movements are squashed flat before being shown to the audience. With preserve-3d, you build one large stage where all actors can move around and interact with each other in a shared three-dimensional space. The parent element becomes the stage itself.

How it works

The property has two values. flat renders an element's children onto its own 2D plane before applying its own transforms. preserve-3d tells the browser that the children should be positioned in a 3D space defined by the parent. This creates a new stacking context and a shared perspective for all children. Critically, this property is not inherited; you must apply it to every element that acts as a container for other 3D-transformed elements in your scene.

When to use it

Use transform-style: preserve-3d on a container element when you want its children to be transformed relative to each other in a shared 3D space. This is the key to building composite 3D objects, such as a cube made of six div faces or a card that flips over to reveal a back side. You are essentially creating a mini-scene.

When not to use it

Avoid using preserve-3d on elements that also need properties that require flattening. The browser will force transform-style to flat if the element has opacity less than 1, a filter, clip-path, mask-image, or an overflow value other than visible. This is the most common source of bugs with 3D transforms; your scene will unexpectedly collapse into a 2D plane. If you need these properties, apply them to a wrapper element outside the 3D scene hierarchy.

One canonical example

To create a 3D cube, you need a container element and six child elements for the faces. The container must have transform-style: preserve-3d. Each face is then translated and rotated into its correct position in 3D space. Without preserve-3d on the container, the faces would not form a cube; they would each be transformed in isolation and then flattened onto the container's plane.