AAtomic CSS

backface-visibility

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

클래스 목록

클래스CSS설명
bfvvbackface-visibility: visible뒷면이 보임 (기본값). 뒤집히면 거울 반전된 내용이 보임
bfvhbackface-visibility: hidden뒷면을 숨김. 카드 플립 애니메이션에 필수

visible vs hidden

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

visible (기본값) — bfvv

뒷면 보임

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

hidden — bfvh

보이지 않음

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

사용 예시

<!-- 3D 카드 플립 (완전한 예제) -->
<div class="per100rem w30rem h20rem">
  <div class="pr tsp3d w100p h100p tall600msease hover-tryy180deg">
    <!-- 앞면 -->
    <div class="pa w100p h100p bg6366F1 cFFFFFF df jcc aic br8px bfvh">
      앞면 콘텐츠
    </div>
    <!-- 뒷면 (미리 180도 회전) -->
    <div class="pa w100p h100p bg34D399 cFFFFFF df jcc aic br8px bfvh tryy180deg">
      뒷면 콘텐츠
    </div>
  </div>
</div>

<!-- 단독 사용: 뒷면 숨기기 -->
<div class="bfvh tryy45deg">
  45도 회전된 요소 (뒷면 숨김)
</div>

팁 & 주의사항

카드 플립 필수 조합

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

앞면과 뒷면 모두에 적용

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

transform-style: preserve-3d 필수

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

transform-styleperspectivetransformtransform-origin