Design Atlas
한국어
✦ Visual effects

backface-visibility

When a 3D-rotated element turns away from the viewer, this decides whether its reverse side still renders mirrored (visible, the default) or disappears entirely (hidden).

Also known as: Hide back faceFlip card back
···
html
<div class="row">
  <div class="col"><div class="scene"><div class="face hid">A</div></div><div class="cap">backface-visibility: hidden</div></div>
  <div class="col"><div class="scene"><div class="face vis">B</div></div><div class="cap">backface-visibility: visible</div></div>
</div>
css
.row{display:flex;gap:16%}
.col{display:flex;flex-direction:column;align-items:center;gap:10px}
.scene{perspective:600px}
.face{width:26vmin;max-width:110px;aspect-ratio:1;border-radius:14px;display:grid;place-items:center;color:#fff;
  font:800 18px/1 sans-serif;background:linear-gradient(135deg,#5b5bf7,#18c29c);animation:spin 4s linear infinite}
.face.hid{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.face.vis{-webkit-backface-visibility:visible;backface-visibility:visible;background:linear-gradient(135deg,#f25c8a,#ffb648)}
@keyframes spin{to{transform:rotateY(360deg)}}
.cap{font:600 12px monospace;color:var(--muted)}

The default is visible — rotate to rotateY(180deg) and the text keeps rendering, mirrored left-right. Set backface-visibility: hidden and the element vanishes the moment it passes 90 degrees.

That behaviour is exactly what a flip card needs: stack a front and a back face in the same spot, pre-rotate the back by rotateY(180deg), then rotate the shared parent — whichever face is currently facing the camera is the only one hidden's rule lets through.

Without perspective, or with preserve-3d missing somewhere in the nesting, the rotation itself won't read as 3D even if this property is set — treat perspective, backface-visibility and transform-style as one set. Safari used to require the -webkit-backface-visibility prefix.

When to use

Use hidden when "which face is showing" carries meaning — flip cards, flipping loaders. If you just need a spin animation, leave the default (visible) alone.