AAtomic CSS

backface-visibility

3D 회전된 요소의 뒷면이 보이는지 여부를 제어합니다. bfvh는 카드 플립 애니메이션에서 뒷면을 숨기는 데 필수적입니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
bfvvbackface-visibility: visible뒷면이 보임 (기본값). 뒤집히면 거울 반전된 내용이 보임
bfvhbackface-visibility: hidden뒷면을 숨김. 카드 플립 애니메이션에 필수

visible vs hidden

Y축 180도 회전된 요소에서 뒷면이 어떻게 보이는지 비교합니다.

visible (기본값) — bfvv

Backface visible

뒷면이 거울처럼 뒤집힌 상태로 보입니다

hidden — bfvh

Not visible

뒷면이 완전히 숨겨져 투명하게 됩니다

사용 예시

<!-- 3D card flip (complete example) -->
<div class="per100rem w30rem h20rem">
  <div class="pr tsp3d w100p h100p tall600msease hover-tryy180deg">
    <!-- Front face -->
    <div class="pa w100p h100p bg6366F1 cFFFFFF df jcc aic br8px bfvh">
      Front content
    </div>
    <!-- Back face (pre-rotated 180deg) -->
    <div class="pa w100p h100p bg34D399 cFFFFFF df jcc aic br8px bfvh tryy180deg">
      Back content
    </div>
  </div>
</div>

<!-- Standalone: hide backface -->
<div class="bfvh tryy45deg">
  Element rotated 45deg (backface hidden)
</div>

팁 & 주의사항

카드 플립 필수 조합

카드 플립 효과를 구현하려면: 부모에 tsp3d, 부모의 부모에 per100rem, 앞면/뒷면 모두에 bfvh를 적용합니다.

앞면과 뒷면 모두에 적용

카드 플립에서는 앞면과 뒷면 양쪽 모두 bfvh를 적용해야 합니다. 뒷면에만 적용하면 앞면이 뒤집힌 후에도 겹쳐 보입니다.

transform-style: preserve-3d 필수

bfvh는 부모가 tsp3d일 때만 제대로 동작합니다. tsf(flat)에서는 뒷면 개념 자체가 없으므로 효과가 없습니다.

transform-styleperspectivetransformtransform-origin