트랜스폼
perspective
3D 공간에 배치된 엘리먼트의 원근감을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
perspective-dramatic | perspective: var(--perspective-dramatic); /* 100px */ |
perspective-near | perspective: var(--perspective-near); /* 300px */ |
perspective-normal | perspective: var(--perspective-normal); /* 500px */ |
perspective-midrange | perspective: var(--perspective-midrange); /* 800px */ |
perspective-distant | perspective: var(--perspective-distant); /* 1200px */ |
perspective-none | perspective: none; |
perspective-(<custom-property>) | perspective: var(<custom-property>); |
perspective-[<value>] | perspective: <value>; |
예제
기본 예제
perspective-normal과 perspective-distant 같은 유틸리티를 사용해 z-평면이 화면에서 얼마나 가깝거나 멀리 있는지 조절할 수 있습니다:
perspective-dramatic
1
2
3
4
5
6
perspective-normal
1
2
3
4
5
6
<div class="size-20 perspective-dramatic ..."> <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 perspective-normal ..."> <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>이것은 마치 카메라를 물체에 가깝게 또는 멀리 이동시키는 것과 같습니다.
원근감 제거하기
perspective-none 유틸리티를 사용해 엘리먼트의 원근감 변형을 제거할 수 있습니다:
<div class="perspective-none ..."> <!-- ... --></div>커스텀 값 사용하기
perspective-[<value>] 구문을 사용하세요 perspective를 완전히 커스텀한 값으로 설정하려면:
<div class="perspective-[750px] ..."> <!-- ... --></div>CSS 변수를 사용하려면 perspective-(<custom-property>) 구문을 사용할 수도 있습니다:
<div class="perspective-(--my-perspective) ..."> <!-- ... --></div>이는 perspective-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a perspective 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="perspective-midrange md:perspective-dramatic ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
테마 커스터마이징
--perspective-* 테마 변수를 사용해 프로젝트에서 perspective 유틸리티를 커스터마이징할 수 있습니다:
@theme { --perspective-remote: 1800px; }이제 perspective-remote 유틸리티를 마크업에서 사용할 수 있습니다:
<div class="perspective-remote"> <!-- ... --></div>테마 커스터마이징에 대해 더 알아보려면 테마 문서를 참고하세요.
