디자인 아틀라스
EN
✦ 시각 효과

backface-visibility

3D로 회전한 요소가 등을 돌렸을 때, 뒷면을 거울처럼 뒤집어 보여줄지(visible, 기본값) 아예 지울지(hidden) 정하는 속성.

다른 이름: 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)}

기본값은 visible 입니다 — rotateY(180deg) 로 뒤돌면 글자가 좌우 반전된 채로 계속 보입니다. backface-visibility: hidden 을 주면 90도를 넘는 순간 요소가 통째로 사라집니다.

이 성질을 이용한 게 카드 뒤집기(플립 카드) 패턴입니다: 앞면·뒷면 두 요소를 같은 자리에 겹쳐 두고 뒷면은 rotateY(180deg) 로 미리 돌려놓은 뒤, 부모를 회전시키면 항상 "지금 카메라를 보고 있는" 면만 hidden 규칙 때문에 나타납니다.

perspective 가 없거나 transform-style: preserve-3d 없이 중첩돼 있으면 이 속성이 있어도 회전 자체가 안 보이니, perspective·backface-visibility·transform-style 세 개를 한 세트로 기억하는 게 안전합니다. Safari 는 예전에 -webkit-backface-visibility 접두어가 필요했습니다.

언제 쓰나

플립 카드, 뒤집는 로딩 인디케이터처럼 "지금 어느 면이 보이는가"가 상태를 뜻할 때 hidden 을 씁니다. 그냥 회전 애니메이션만 필요하면 기본값(visible)을 건드릴 필요가 없습니다.