AAtomic CSS

transform-style

자식 요소가 3D 공간에서 렌더링되는 방식을 결정합니다. tsp3d는 3D 카드 플립, 큐브 회전 등 3D 효과에 필수적인 클래스입니다.

클래스 목록

클래스CSS설명
tsftransform-style: flat자식을 평면으로 렌더링 (기본값)
tsp3dtransform-style: preserve-3d자식이 3D 공간에서 독립적으로 렌더링

flat vs preserve-3d

tsf는 자식의 3D 변환을 평면으로 납작하게 렌더링합니다. tsp3d는 자식이 실제 3D 공간에서 독립적으로 렌더링됩니다.

tsf (flat)tsp3d (preserve-3d)
자식 3D 변환평면으로 납작하게 렌더링3D 공간에서 독립적으로 렌더링
카드 플립불가 (뒷면이 보이지 않음)가능 (앞면/뒷면 3D 회전)
성능가벼움 (2D 합성)상대적으로 무거움 (3D 합성)
주요 용도기본값, 2D 변환만 사용할 때카드 플립, 큐브, 3D 씬

사용 예시

<!-- 3D 카드 플립 -->
<div class="pr w30rem h20rem" >
  <div class="tsp3d w100p h100p tall600msease hover-tryy180deg">
    <!-- 앞면 -->
    <div class="pa w100p h100p bg6366F1 cFFFFFF df jcc aic br8px bfvh">
      앞면
    </div>
    <!-- 뒷면 -->
    <div class="pa w100p h100p bg34D399 cFFFFFF df jcc aic br8px bfvh tryy180deg">
      뒷면
    </div>
  </div>
</div>

<!-- flat (기본값) — 3D 효과 없음 -->
<div class="tsf">
  <div class="tr45deg">평면으로 렌더링됨</div>
</div>

팁 & 주의사항

3D 카드 플립에 필수

카드 플립 효과를 만들려면 부모에 tsp3d를, 뒷면에 bfvh(backface-visibility: hidden)를 적용해야 합니다.

overflow: hidden과 충돌

oh(overflow: hidden)이 적용된 부모에서는 tsp3d가 무시되어 tsf처럼 동작합니다. 3D 효과 사용 시 overflow 설정에 주의하세요.

transformtransform-originperspectivebackface-visibility