변환 스타일

변환 스타일 (Transform Style)

자식 요소들이 3D 공간에서 렌더링될지, 2D 평면(flat)으로 렌더링될지를 정해주는 유틸리티예요. 3D 변환을 제대로 보여주려면 필수적인 설정이에요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

transform-3d transform-style: preserve-3d;

transform-flat transform-style: flat;

예시 (Examples)

기본 예제 (Basic example)

transform-3d를 사용하면 자식 요소를 3D 공간에 배치할 수 있어요.

<div class="size-20 transform-flat ...">
  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div>
  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div>
  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div>
  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div>
  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div>
  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div>
</div><div class="size-20 transform-3d ...">
  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div>
  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div>
  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div>
  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div>
  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div>
  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div>
</div>

이 설정이 없으면 자식 요소들은 3D 공간이 아니라 2D 공간에서만 변환돼요.

반응형 디자인 (Responsive design)

transform-style 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.

<div class="transform-3d md:transform-flat ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.