변형과 애니메이션

✨ 1단계: 마법처럼 형태를 바꾸는 Transform

CSS만으로도 요소를 이동시키거나, 회전하고, 크기를 바꿀 수 있습니다.

🧭 웹 브라우저의 2D 좌표계 주의사항!

수학 시간의 그래프와 달리, 웹 브라우저에서는 Y축이 아래로 갈수록 플러스(+)입니다!

+X (우) 👉

👈 -X (좌)

+Y (하) 👇

-Y (상) 👆

속성 / 함수	설명 및 역할
transform	요소의 형태를 변형시키는 핵심 속성입니다. 여러 함수를 띄어쓰기로 연결해서 사용할 수 있습니다.
translate(X, Y)	현재 위치를 기준으로 지정된 픽셀만큼 이동합니다.
scale(배율)	요소의 크기를 조절합니다. 1이 원본, 2면 두 배가 됩니다.
rotate(각도)	지정된 각도(deg)만큼 시계 방향으로 회전합니다.
skewX(각도)	요소를 지정된 각도만큼 마름모꼴로 비틉니다.
transition	형태나 색상이 변할 때, 딱딱하게 바뀌지 않고 부드럽게 전환(애니메이션)되도록 소요 시간을 지정합니다. (예: `transition: 0.3s;`)

<div style="text-align: center; margin-bottom: 10px; color: #64748b; font-weight: bold;">
  👇 박스들 위에 마우스를 올려보세요!
</div>
<div class="button-container">
  <div class="anim-box box-translate">Translate<br>(이동)</div>
  <div class="anim-box box-rotate">Rotate<br>(회전)</div>
  <div class="anim-box box-scale">Scale<br>(크기)</div>
  <div class="anim-box box-skew">Skew<br>(비틀기)</div>
</div>

실행 결과