원근 원점

원근 원점 (Perspective Origin)

원근(perspective)의 소실점(vanishing point)이 어디에 위치할지 정하는 유틸리티예요. CSS의 perspective-origin 속성을 조절해요.

출처: 문서

본문

클래스와 스타일

perspective-origin-center — perspective-origin: center;
perspective-origin-top — perspective-origin: top;
perspective-origin-top-right — perspective-origin: top right;
perspective-origin-right — perspective-origin: right;
perspective-origin-bottom-right — perspective-origin: bottom right;
perspective-origin-bottom — perspective-origin: bottom;
perspective-origin-bottom-left — perspective-origin: bottom left;
perspective-origin-left — perspective-origin: left;
perspective-origin-top-left — perspective-origin: top left;
perspective-origin-(<custom-property>) — perspective-origin: var(<custom-property>);
perspective-origin-[<value>] — perspective-origin: <value>;

기본 예제

perspective-origin-top이나 perspective-origin-bottom-left 같은 유틸리티를 쓰면 원근의 소실점 위치를 제어할 수 있어요.

<div class="size-20 perspective-near perspective-origin-top-left ...">
  <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-near perspective-origin-bottom-right ...">
  <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-origin-[<value>] 문법을 쓰면 완전히 커스텀한 값으로 원근 원점을 정할 수 있어요.

<div class="perspective-origin-[200%_150%] ...">
  <!-- ... -->
</div>

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

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

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

반응형 디자인

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

<div class="perspective-origin-center md:perspective-origin-bottom-left ...">
  <!-- ... -->
</div>

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