AAtomic CSS

transform-style

Determines how children render in 3D space. tsp3d is essential for card flips, cube rotations.

Class List

ClassCSSDescription
tsftransform-style: flatRender children flat (default)
tsp3dtransform-style: preserve-3dChildren render independently in 3D

flat vs preserve-3d

tsf renders children flat. tsp3d renders children independently in 3D.

tsf (flat)tsp3d (preserve-3d)
child 3D transform평면으로 납작하게 렌더링3D 공간에서 독립적으로 렌더링
Card flip불가 (Back이 보이지 않음)가능 (Front/Back 3D 회전)
Performance가벼움 (2D 합성)상대적으로 무거움 (3D 합성)
Common Use Cases기본값, 2D 변환만 사용할 때카드 플립, 큐브, 3D 씬

Usage Examples

<!-- 3D card flip -->
<div class="pr w30rem h20rem" >
  <div class="tsp3d w100p h100p tall600msease hover-tryy180deg">
    <!-- Front -->
    <div class="pa w100p h100p bg6366F1 cFFFFFF df jcc aic br8px bfvh">
      Front
    </div>
    <!-- Back -->
    <div class="pa w100p h100p bg34D399 cFFFFFF df jcc aic br8px bfvh tryy180deg">
      Back
    </div>
  </div>
</div>

<!-- flat (default) — no 3D effect -->
<div class="tsf">
  <div class="tr45deg">Rendered as flat</div>
</div>

Tips & Notes

Essential for 3D card flip

For card flip, apply tsp3d to parent and bfvh (backface-visibility: hidden) to back face.

Conflict with overflow: hidden

oh on parent causes tsp3d to be ignored, behaving like tsf. Watch overflow settings with 3D effects.

transformtransform-originperspectivebackface-visibility