3D Transforms | Minstudio

지금까지 X축(가로)과 Y축(세로)만 사용했다면, 이제 Z축(깊이)을 사용하여 요소를 화면 앞뒤로 움직이고 회전시킬 차례입니다.

핵심 속성	설명 및 역할
perspective: 1000px;	🔥 필수: 원근감 부여 3D 효과를 볼 부모 요소에 적용합니다. 이 값이 작을수록 극적인(왜곡된) 3D 효과가 나고, 클수록 멀리서 보는 것처럼 평온합니다.
transform-style: preserve-3d;	자식 요소들도 3D 공간의 Z축을 유지하도록 설정합니다. (이게 없으면 3D 요소가 평면에 납작하게 눌려버립니다.)
transform: rotateY(180deg);	Y축(세로 기둥)을 기준으로 요소를 팽이처럼 회전시킵니다. (카드 뒤집기에 사용)
backface-visibility: hidden;	요소가 뒤집혀서 뒷면이 보일 때, 거울처럼 비치는 뒷면을 투명하게 숨겨줍니다.

지금까지 X축(가로)과 Y축(세로)만 사용했다면, 이제 Z축(깊이)을 사용하여 요소를 화면 앞뒤로 움직이고 회전시킬 차례입니다.

핵심 속성	설명 및 역할
perspective: 1000px;	🔥 필수: 원근감 부여 3D 효과를 볼 부모 요소에 적용합니다. 이 값이 작을수록 극적인(왜곡된) 3D 효과가 나고, 클수록 멀리서 보는 것처럼 평온합니다.
transform-style: preserve-3d;	자식 요소들도 3D 공간의 Z축을 유지하도록 설정합니다. (이게 없으면 3D 요소가 평면에 납작하게 눌려버립니다.)
transform: rotateY(180deg);	Y축(세로 기둥)을 기준으로 요소를 팽이처럼 회전시킵니다. (카드 뒤집기에 사용)
backface-visibility: hidden;	요소가 뒤집혀서 뒷면이 보일 때, 거울처럼 비치는 뒷면을 투명하게 숨겨줍니다.