perspective와 3차원 회전으로 깊이감을 만듭니다.
부모의 perspective는 관찰 거리를 정하고 rotateX/Y는 요소를 3차원 축으로 회전합니다. transform-style:preserve-3d는 자식의 3D 위치를 유지합니다.
이번 예제의 출발점은 perspective: 600px; transform: rotateY(35deg);입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 rotateY를 rotateX로 바꾸세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
큰 3D 움직임은 어지러움을 줄 수 있으므로 prefers-reduced-motion을 고려하세요.
직접 바꿔보세요rotateY를 rotateX로 바꾸세요.