perspective — 디자인 아틀라스

<div class="row"> <div class="col"><div class="scene a"><div class="box">200px</div></div><div class="cap">perspective: 200px</div></div> <div class="col"><div class="scene b"><div class="box b2">1200px</div></div><div class="cap">perspective: 1200px</div></div> </div>

.row{display:flex;gap:16%} .col{display:flex;flex-direction:column;align-items:center;gap:10px} .scene{perspective:200px} .scene.b{perspective:1200px} .box{width:26vmin;max-width:110px;aspect-ratio:1;border-radius:14px;display:grid;place-items:center;color:#fff; font:700 13px/1.2 monospace;background:linear-gradient(135deg,#5b5bf7,#18c29c);animation:spin 4s linear infinite} .box.b2{background:linear-gradient(135deg,#f25c8a,#ffb648)} @keyframes spin{to{transform:rotateY(360deg)}} .cap{font:600 12px monospace;color:var(--muted)}

rotateX/rotateY 만으로는 아무 3D 도 안 보입니다 — 원근감을 만드는 건 perspective 입니다. 3D 로 변환할 요소의 부모에 perspective: 200px 처럼 값을 주면, 그 부모가 "카메라에서 200px 떨어진 화면"이 되고 자식이 그 안에서 회전합니다. (요소 자신의 transform 안에 perspective(200px) 함수로 넣는 방법도 있고 동작은 같습니다.)

값이 작을수록 카메라가 가까이 있는 셈이라 회전 시 크기·왜곡 변화가 급격합니다(어안렌즈 느낌). 값이 클수록 카메라가 멀리 있어 변화가 완만합니다. 데모의 두 박스를 비교해 보세요 — 같은 rotateY 애니메이션인데 perspective: 200px 쪽이 훨씬 요란하게 찌그러집니다.

중첩된 3D 구조(예: 큐브)를 쓸 때는 자식에 transform-style: preserve-3d 를 같이 줘야 손자 요소들도 평평해지지 않고 입체를 유지합니다.

언제 쓰나

카드 뒤집기·제품 쇼케이스처럼 은은한 입체감이면 800~1500px, 과장된 티저·인트로 애니메이션이면 200~400px 부터 감을 잡으세요.