backface-visibility

backface-visibility controls whether an element’s reverse face is painted when it faces the viewer. Visible can show mirrored content; hidden suppresses that face’s painting.

Inspect a 180-degree face

Both decorative faces are turned away. Visible shows the reverse painting; hidden leaves the second stage empty. Labels remain outside the transformed decoration.

<p>Visible reverse face</p>
<div class="stage"><div class="face visible" aria-hidden="true">ABC</div></div>
<p>Hidden reverse face</p>
<div class="stage"><div class="face hidden" aria-hidden="true">ABC</div></div>

.stage {
  height: 100px;
  background: #eff6ff;
  padding: 1rem;
  margin-block: 0.5rem;
}
.face {
  width: 120px;
  height: 70px;
  background: #2563eb;
  color: white;
  transform: rotateY(180deg);
}
.visible {
  backface-visibility: visible;
}
.hidden {
  backface-visibility: hidden;
}

Flip decorative artwork with a keyboard-operable control

The checkbox rotates the decorative face without motion. Essential information stays outside the face, so no hidden control remains available on the reverse side.

<input class="turn" id="turn" type="checkbox" /><label for="turn"
  >Turn the decorative face away</label
>
<div class="stage"><div class="face" aria-hidden="true"></div></div>
<p>The lesson remains available while the face is turned away.</p>

.stage {
  height: 110px;
  perspective: 350px;
  padding: 1rem;
  background: #eff6ff;
}
.face {
  width: 120px;
  height: 70px;
  background: #2563eb;
  backface-visibility: hidden;
}
.turn:checked ~ .stage .face {
  transform: rotateY(180deg);
}

Values and defaults

The initial value is visible and the property is not inherited. Hidden suppresses the back face when its orientation exposes it. An ordinary 2D translation does not expose a reverse face. A real two-sided card normally gives each face its own backface rule and reverses the back face by 180 degrees.

Common mistakes

Visual hiding does not remove focusable descendants from keyboard navigation or accessibility exposure. A product card containing controls needs explicit visibility, focus, and state management; a hover-only flip is not sufficient. This example deliberately contains only hidden-from-accessibility decoration. No 3D property guarantees GPU acceleration or suitability for every device.

Learn transform-style, perspective, and visibility.

Sources and browser support

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