PLAY CSS
jaen

Transform

transform-style

transform-style sets whether children moved in 3D share the element’s 3D space or are drawn flat onto its surface.

Syntax

flat | preserve-3d

Preview

3D
Presets
Drag the bottom-right corner to resize

Code

.box {
  perspective: 300px;
}

.box > :nth-child(2) {
  transform: rotateY(50deg);
  transform-style: preserve-3d;
}

Controls

transform-stylepreserve-3d
transform-style
3D

About

Values

  • flat: the initial value. Children rotated or moved toward you in 3D are flattened, like a picture painted on the element’s surface.
  • preserve-3d: children are placed in the same 3D space as the element, so they can stand out in front of its surface or sink behind it.

When to use it

  • To build something out of several faces in 3D, like a cube, put preserve-3d on the parent that holds the faces.
  • For a card that flips between a front and a back face, put it on the parent of the two faces (and give the faces backface-visibility: hidden).

Things to watch

  • It goes on the parent of the children you move in 3D. Depth comes from perspective: in this page, the perspective on the box reaches the badge inside the card as well as the card itself.
  • These values make preserve-3d behave as flat: overflow other than visible or clip, opacity below 1, filter, clip-path or mask-image other than none, mix-blend-mode other than normal, isolation: isolate, contain: paint, and similar.
  • An element with preserve-3d creates a stacking context, and its position: fixed descendants are placed relative to it.

In the preview, supporting declarations give the box depth (perspective: 300px) and turn the card (the second child) 50 degrees on the vertical axis. The red badge inside the card is moved toward you by the sample itself with transform: translateZ(48px) (not shown in the code). With flat the badge is painted onto the card; with preserve-3d it stands out from it.

References

MDN Web Docstransform-styleSpecificationCSS Transforms Module Level 2Can I usetransform-style

Comments

PLAY CSS