🎞️ transform: scale, rotate, translate 완전 정리

🎞️ transform: scale, rotate, translate 완전 정리

transform은 요소를 이동, 회전, 확대/축소, 기울이기 등의 방식으로 시각적으로 변화시키는 CSS 속성입니다. 다양한 애니메이션과 인터랙션 구현에 자주 사용되며, 레이아웃에 영향을 주지 않고 시각적으로만 변화시키는 것이 특징입니다.

---

1️⃣ transform 속성의 대표 함수

함수	설명	예시
translate(x, y)	이동	translate(20px, 10px)
scale(x, y)	확대/축소	scale(1.2)
rotate(angle)	회전	rotate(45deg)
skew(x, y)	기울이기	skew(10deg, 0)
matrix()	복합 변형 (고급)	matrix(a,b,c,d,e,f)

---

2️⃣ translate – 위치 이동

.box {
  transform: translate(50px, 20px);
}

• X축: 50px 오른쪽
• Y축: 20px 아래

👉 요소의 위치를 시각적으로만 이동시키며, 다른 요소의 위치엔 영향을 주지 않습니다.

---

3️⃣ scale – 크기 조절

.button:hover {
  transform: scale(1.1);
}

• 1보다 크면 확대, 1보다 작으면 축소
• scaleX, scaleY로 축별 확대 가능

---

4️⃣ rotate – 회전

.icon {
  transform: rotate(180deg);
}

👉 요소를 중심점 기준으로 회전합니다. 중심점 변경은 transform-origin으로 가능

.icon {
  transform-origin: top left;
}

---

5️⃣ 복합 사용 예

.card:hover {
  transform: translateY(-10px) scale(1.03);
  transition: transform 0.3s ease;
}

👉 이동 + 확대 효과를 동시에 적용하여 입체감 있는 hover 효과 구현

---

6️⃣ transform과 GPU 가속

transform은 브라우저 GPU 가속이 적용되어 부드럽고 성능 좋은 애니메이션이 가능합니다. 특히 translate / scale / opacity 조합은 퍼포먼스 최적화에도 효과적입니다.

---

📌 정리 요약

• translate(): 위치 이동 (레이아웃 영향 없음)
• scale(): 확대/축소
• rotate(): 회전
• transform은 복합 조합 가능
• GPU 가속을 활용한 부드러운 애니메이션에 적합

---

📌 다음 글 예고

다음 글: “호버 효과, 클릭 효과, 토글 효과 – 상태별 인터랙션 스타일링”에서는 사용자 인터랙션에 따라 스타일을 변화시키는 다양한 상태 스타일링 기법을 다룹니다.