AAtomic CSS

perspective-origin

3D 변환의 소실점(vanishing point) 위치를 설정합니다. 보는 사람의 눈이 어디에 있는지를 정하는 값이라고 생각하면 쉽습니다. poc가 기본값이며, 소실점을 옮기면 같은 회전이라도 전혀 다른 각도에서 본 것처럼 보입니다.

클래스 목록

클래스CSS설명
pocperspective-origin: center중앙 소실점 (기본값)
potperspective-origin: top상단 소실점
pobperspective-origin: bottom하단 소실점
polperspective-origin: left좌측 소실점
porperspective-origin: right우측 소실점

라이브 데모

두 상자는 완전히 같은 회전값을 가지고 있고, 왼쪽 컨테이너에만 perspective가 걸려 있습니다. 버튼으로 소실점을 옮겨 보세요.

perspective 있음

평면

소실점을 옮길 때마다 같은 회전이 다른 각도에서 본 것처럼 바뀝니다.

perspective 없음

평면

부모에 perspective가 없으므로 소실점을 아무리 바꿔도 화면이 전혀 변하지 않습니다.

이것이 perspective-origin에서 가장 자주 겪는 문제입니다. 클래스는 정상적으로 적용되지만 부모에 perspective가 없으면 원근 투영 자체가 일어나지 않아 아무 효과도 보이지 않습니다.

클래스별 상세

pocperspective-origin: center

소실점을 요소의 정중앙에 둡니다. 초기값이며, 보는 사람이 대상 정면에 서 있는 상태입니다. 상위에서 다른 소실점이 지정된 경우 이를 되돌리는 용도로 명시합니다.

<!-- Default viewpoint: the camera sits straight in front of the box -->
<div class="per80rem poc">
  <div class="tsp3d trx20deg w30rem h20rem bg18181B br8px">Card</div>
</div>

potperspective-origin: top

소실점을 위쪽으로 올립니다. 대상을 내려다보는 시점이 되어, 카드가 책상 위에 놓인 것처럼 보이는 연출에 적합합니다.

<!-- Camera raised above the element: you look down onto it -->
<div class="per80rem pot">
  <div class="tsp3d trx20deg w30rem h20rem bg18181B br8px">Table top view</div>
</div>

pobperspective-origin: bottom

소실점을 아래쪽으로 내립니다. 대상을 올려다보는 시점이 되어 크고 웅장한 인상을 줍니다. 히어로 영역의 큰 배너에 어울립니다.

<!-- Camera below the element: a hero shot looking upward -->
<div class="per80rem pob">
  <div class="tsp3d trx20deg w30rem h20rem bg18181B br8px">Looking up</div>
</div>

polperspective-origin: left

소실점을 왼쪽으로 옮깁니다. 왼쪽에서 대상을 바라보는 셈이라 오른쪽 면이 더 열려 보입니다. 화면 왼편에 배치된 3D 요소를 자연스럽게 만들 때 씁니다.

<!-- Camera shifted to the left: the right side of the box opens up -->
<div class="per80rem pol">
  <div class="tsp3d try30deg w30rem h20rem bg18181B br8px">Seen from the left</div>
</div>

porperspective-origin: right

소실점을 오른쪽으로 옮깁니다. 좌측 값과 대칭이며, 서로 마주 보는 한 쌍의 카드처럼 좌우 배치가 있는 구성에서 짝으로 사용합니다.

<!-- Camera shifted to the right: mirrors the left variant.
     Useful for a facing pair, such as two cards angled toward each other. -->
<div class="df gap2rem">
  <div class="per80rem pol">
    <div class="tsp3d try30deg w30rem h20rem bg18181B br8px">Left card</div>
  </div>
  <div class="per80rem por">
    <div class="tsp3d try30deg w30rem h20rem bg18181B br8px">Right card</div>
  </div>
</div>

사용 예시

perspective-origin은 perspective 속성이 설정된 부모 요소에 적용합니다. 자식은 3D 변환을 가지고 있어야 합니다.

<!-- Default center viewpoint -->
<div class="per80rem poc">
  <div class="tsp3d trx20deg w30rem h20rem bg18181B br8px">3D rotated element</div>
</div>

<!-- Viewpoint moved to the left edge -->
<div class="per80rem pol">
  <div class="tsp3d try30deg w30rem h20rem bg18181B br8px">Viewed from the left</div>
</div>

실전 예시: 3D 상품 진열대

컨테이너 한 곳에 perspective와 소실점을 지정하면 여러 카드가 하나의 장면 안에 놓인 것처럼 보입니다. 카드마다 따로 perspective를 주면 각자 다른 카메라로 찍은 것처럼 어색해집니다.

<!-- Product shelf: one shared vanishing point above the row makes the
     whole set of cards read as a single scene instead of five separate
     rotations. The perspective and its origin live on the container. -->
<section class="per100rem pot">
  <div class="tsp3d df gap16px">
    <article class="trx20deg fs0 w28rem h30rem br8px oh bg18181B">
      <img src="/shoe-1.jpg" alt="" class="w100p h20rem ofc">
      <p class="p16px fs14px cFAFAFA">Runner</p>
    </article>
    <article class="trx20deg fs0 w28rem h30rem br8px oh bg18181B">
      <img src="/shoe-2.jpg" alt="" class="w100p h20rem ofc">
      <p class="p16px fs14px cFAFAFA">Trainer</p>
    </article>
  </div>
</section>

주의사항

부모에 perspective가 없으면 아무 일도 없습니다

perspective-origin은 원근 투영의 기준점만 옮깁니다. 부모에 per80rem 같은 perspective 클래스가 없으면 투영 자체가 없으므로 소실점도 의미가 없습니다. 효과가 안 보일 때 가장 먼저 확인할 곳입니다.

perspective-origin과 transform-origin은 다릅니다

perspective-origin은 부모에 붙어 보는 사람의 위치를 정하고, transform-origin은 요소 자신에 붙어 회전축의 위치를 정합니다. 둘을 바꿔 쓰면 원하는 결과가 나오지 않습니다.

2D 변환에는 영향이 없습니다

자식이 rotateX·rotateY·translateZ 같은 3D 변환을 하나도 쓰지 않으면 소실점을 옮겨도 화면은 그대로입니다. 여러 층이 함께 깊이를 가져야 한다면 tsp3d도 함께 지정하세요.

perspectivetransformtransform-styletransform-originbackface-visibility