minstudio

3D 변형과 원근감 (3D Transforms)

🧊 3단계: 화면 밖으로 튀어나오는 3D 애니메이션

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

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

<div class="scene">
  <div class="card">
    <div class="card-face card-front">
      Hover Me!
    </div>
    <div class="card-face card-back">
      Ta-da! 🎉
    </div>
  </div>
</div>
실행 결과
3D 변형과 원근감 (3D Transforms) | Minstudio