PLAY CSS
jaen

Transform

backface-visibility

backface-visibility sets whether an element rotated in 3D so that its back faces you is shown or hidden.

Syntax

visible | hidden

Preview

3D
Presets
Drag the bottom-right corner to resize

Code

.box {
  perspective: 300px;
}

.box > :nth-child(2) {
  transform: rotateY(150deg);
  backface-visibility: hidden;
}

Controls

backface-visibilityhidden
backface-visibility
3D

About

Values

  • visible: the initial value. The back is visible, with the contents mirrored left to right (or top to bottom).
  • hidden: the element disappears while its back faces you.

When to use it

Stack a front and a back face, flip the back one ahead of time with rotateY(180deg), and give both hidden: rotating the parent then flips the card over. The parent also needs transform-style: preserve-3d for this.

Things to watch

  • It goes on the rotated element itself (not on the parent, unlike perspective).
  • Whether the back faces you also depends on the rotation of ancestors joined to it with transform-style: preserve-3d.

In the preview, supporting declarations give the box depth (perspective: 300px) and turn the card (the second child) 150 degrees on the vertical axis so that its back faces you.

References

MDN Web Docsbackface-visibilitySpecificationCSS Transforms Module Level 2Can I usebackface-visibility

Comments

PLAY CSS