트랜지션 기초

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

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

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

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

+X (우) 👉

👈 -X (좌)

+Y (하) 👇

-Y (상) 👆

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

속성 / 함수

설명 및 역할

transform

요소의 형태를 변형시키는 핵심 속성입니다. 여러 함수를 띄어쓰기로 연결해서 사용할 수 있습니다.

translate(X, Y)

현재 위치를 기준으로 지정된 픽셀만큼 이동합니다.

scale(배율)

요소의 크기를 조절합니다. 1이 원본, 2면 두 배가 됩니다.

rotate(각도)

지정된 각도(deg)만큼 시계 방향으로 회전합니다.

skewX(각도)

요소를 지정된 각도만큼 마름모꼴로 비틉니다.

transition

형태나 색상이 변할 때, 딱딱하게 바뀌지 않고 부드럽게 전환(애니메이션)되도록 소요 시간을 지정합니다. (예: transition: 0.3s;)

<div style="text-align: center; margin-bottom: 20px; color: #94a3b8; 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>