트랜스폼
backface-visibility
엘리먼트의 뒷면 가시성을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
backface-hidden | backface-visibility: hidden; |
backface-visible | backface-visibility: visible; |
예제
기본 예제
backface-visible 유틸리티를 사용해 엘리먼트의 뒷면을 보이게 할 수 있습니다. 예를 들어, 큐브가 회전하여 보이지 않을 때도 뒷면을 표시할 수 있습니다.
backface-hidden
1
2
3
4
5
6
backface-visible
1
2
3
4
5
6
<div class="size-20 ..."> <div class="translate-z-12 rotate-x-0 bg-sky-300/75 backface-hidden ...">1</div> <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 backface-hidden ...">2</div> <div class="translate-x-12 rotate-y-90 bg-sky-300/75 backface-hidden ...">3</div> <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 backface-hidden ...">4</div> <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 backface-hidden ...">5</div> <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 backface-hidden ...">6</div></div><div class="size-20 ..."> <div class="translate-z-12 rotate-x-0 bg-sky-300/75 backface-visible ...">1</div> <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 backface-visible ...">2</div> <div class="translate-x-12 rotate-y-90 bg-sky-300/75 backface-visible ...">3</div> <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 backface-visible ...">4</div> <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 backface-visible ...">5</div> <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 backface-visible ...">6</div></div>반응형 디자인
접두사 a backface-visibility 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="backface-visible md:backface-hidden ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
