transform-style

transform-style chooses whether children share a preserved 3D space or are flattened into their parent’s plane. Flat does not mean the parent’s own transform is ignored.

Compare flat and preserved depth

Each parent is tilted around Y; its child is moved 45px along Z. Preserve-3d retains the child’s depth through the parent’s tilt; flat flattens it before the parent is projected.

<p>Flat</p>
<div class="scene">
  <div class="parent flat"><div class="child" aria-hidden="true"></div></div>
</div>
<p>Preserve-3d</p>
<div class="scene">
  <div class="parent preserved">
    <div class="child" aria-hidden="true"></div>
  </div>
</div>

.scene {
  perspective: 350px;
  height: 130px;
  width: 220px;
  margin-block: 1rem;
  background: #eff6ff;
}
.parent {
  transform: rotateY(35deg);
  width: 150px;
  height: 90px;
  border: 2px dashed #172554;
}
.flat {
  transform-style: flat;
}
.preserved {
  transform-style: preserve-3d;
}
.child {
  transform: translateZ(45px);
  width: 70px;
  height: 60px;
  background: #2563eb;
}

Preserve every needed intermediate level

Transform-style is not inherited. The two transformed intermediate boxes each preserve depth so the nested face stays in the same 3D context.

<div class="scene">
  <div class="outer">
    <div class="inner"><div class="face">Nested depth</div></div>
  </div>
</div>

.scene {
  perspective: 350px;
  height: 150px;
  background: #eff6ff;
  padding: 1rem;
}
.outer,
.inner {
  transform-style: preserve-3d;
}
.outer {
  transform: rotateY(25deg);
}
.inner {
  transform: rotateX(20deg);
}
.face {
  width: 100px;
  height: 70px;
  background: #2563eb;
  color: white;
  transform: translateZ(30px);
}

Values and defaults

The initial value is flat and the property is not inherited. Preserve-3d retains descendants in 3D space across that level. It does not itself define perspective, and it must be applied to every relevant intermediate level.

Common mistakes

Grouping properties can force a used value of flat even when preserve-3d is specified. Examples include opacity below 1, filter other than none, isolation:isolate, masking, paint containment, and overflow values other than visible or clip. Move clipping/effects to a suitable outer wrapper when preservation is needed. A computed style showing preserve-3d does not prove the scene avoids forced flattening.

Learn perspective, backface-visibility, and opacity.

Sources and browser support

MDN: transform-style describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.