perspective와 3D 변환

개념 이해하기

부모의 perspective는 관찰 거리를 정하고 rotateX/Y는 요소를 3차원 축으로 회전합니다. transform-style:preserve-3d는 자식의 3D 위치를 유지합니다.

.stage의 perspective: 500px가 화면에서 500px 떨어진 곳에 관찰자를 두고, .target의 rotateY(35deg)가 상자를 세로축 중심으로 돌려 오른쪽 변은 멀어지고 왼쪽 변은 가까워집니다. 그래서 평평한 사각형이 오른쪽으로 갈수록 낮아지는 사다리꼴처럼 보이고 가로 폭도 회전 전보다 좁아집니다. 두 번째 상자는 display: none이라 장면에 나오지 않습니다.

부모의 perspective 속성은 자식 전체가 하나의 소실점을 공유하게 하지만, transform: perspective(500px) rotateY(35deg)처럼 함수로 쓰면 요소마다 자기 소실점을 가집니다. 카드 여러 장을 한 장면처럼 보이게 하려면 속성을, 카드마다 따로 기울이려면 함수를 고릅니다.