트랜스폼
transform-style
엘리먼트의 자식 요소를 3D 공간에 배치할지 여부를 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
transform-3d | transform-style: preserve-3d; |
transform-flat | transform-style: flat; |
예제
기본 예제
transform-3d를 사용해 자식 엘리먼트를 3D 공간에 배치할 수 있습니다.
transform-flat
1
2
3
4
5
6
transform-3d
1
2
3
4
5
6
<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>이 기능을 사용하지 않으면 자식 엘리먼트는 2D 공간에서만 변환되고 3D 공간에서는 변환되지 않습니다.
반응형 디자인
접두사 a transform-style 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="transform-3d md:transform-flat ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
