원근

원근 (Perspective)

3D 변환에서 z 평면이 화면에서 얼마나 가깝거나 멀리 있는지 정하는 유틸리티예요. CSS의 perspective 속성을 조절해서 3D 효과의 깊이감을 제어할 수 있어요.

출처: 문서

본문

클래스와 스타일

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 평면이 화면에서 얼마나 가깝거나 멀리 있는지 제어할 수 있어요.

<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>] 문법을 쓰면 완전히 커스텀한 값으로 원근을 정할 수 있어요.

<div class="perspective-[750px] ...">
  <!-- ... -->
</div>

CSS 변수를 쓸 때는 perspective-(<custom-property>) 문법도 사용할 수 있어요.

<div class="perspective-(--my-perspective) ...">
  <!-- ... -->
</div>

이건 perspective-[var(<custom-property>)]의 축약형이라서 var() 함수를 자동으로 붙여줘요.

반응형 디자인

perspective 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간(md) 이상 화면 크기에서만 그 유틸리티가 적용돼요.

<div class="perspective-midrange md:perspective-dramatic ...">
  <!-- ... -->
</div>

변형(variant) 사용에 대해 더 알고 싶다면 variants 문서를 참고하세요.

테마 커스터마이징

--perspective-* 테마 변수를 쓰면 프로젝트의 원근 유틸리티를 커스터마이즈할 수 있어요.

@theme {
  --perspective-remote: 1800px;
}

이제 마크업에서 perspective-remote 유틸리티를 쓸 수 있어요.

<div class="perspective-remote">
  <!-- ... -->
</div>

테마를 커스터마이즈하는 방법은 theme 문서에서 더 알아보세요.

원근