CSS_transform

transform 개념 정리

---

📢 transform이란?

• CSS에서 요소에 이동, 회전, 확대/축소, 비틀기 등의 변형 효과를 적용하는 속성
• 애니메이션, 인터랙티브한 UI, 시각적 효과를 만들 때 활용됨

---

🔑 transform 주요 변환 함수

1️⃣ translate(x, y)

• 요소를 X축과 Y축 방향으로 이동
• 문법:

  transform: translate(20px, 25%);

  • 20px: X축으로 20px 이동
  • 25%: Y축으로 부모 요소의 25%만큼 이동
• 특징:
  • 양수 → 오른쪽/아래로 이동
  • 음수 → 왼쪽/위로 이동
  • 한 개의 값만 입력 시: X축만 이동, Y축은 0으로 간주

---

2️⃣ translateX(n) / translateY(n)

• 요소를 X축 또는 Y축을 기준으로 이동
• 문법:

  transform: translateX(20px);  /* X축으로 20px 이동 */
  transform: translateY(30px);  /* Y축으로 30px 이동 */

• 특징:
  • 양수 → 오른쪽(X) / 아래(Y)로 이동
  • 음수 → 왼쪽(X) / 위(Y)로 이동

---

3️⃣ scale(x, y)

• 요소를 X축과 Y축 방향으로 확대 또는 축소
• 배수 단위로 크기 조절 (1 = 원래 크기)
• 문법:

  transform: scale(0.75, 1.1);  /* 가로 0.75배 축소, 세로 1.1배 확대 */

• 특징:
  • 1 → 원래 크기
  • >1 → 확대
  • <1 → 축소

---

4️⃣ scaleX(n) / scaleY(n)

• 요소를 X축 또는 Y축 방향으로만 확대/축소
• 문법:

  transform: scaleX(1.5);  /* 가로 1.5배 확대 */
  transform: scaleY(0.8);  /* 세로 0.8배 축소 */

---

5️⃣ skew(x, y)

• 요소를 X축과 Y축 방향으로 기울여 마름모꼴 형태로 변형
• 문법:

  transform: skew(15deg, 10deg);  /* X축 15도, Y축 10도 기울임 */

• 특징:
  • 각도(deg) 단위로 기울기 설정
  • 양수 → 오른쪽으로 기울기
  • 음수 → 왼쪽으로 기울기

---

6️⃣ skewX(n) / skewY(n)

• 요소를 X축 또는 Y축 방향으로만 기울이기
• 문법:

  transform: skewX(15deg);  /* X축 방향으로 15도 기울임 */
  transform: skewY(-10deg); /* Y축 방향으로 -10도 기울임 */

---

7️⃣ rotate(n)

• 요소를 지정한 각도만큼 회전
• 문법:

  transform: rotate(45deg);   /* 시계 방향으로 45도 회전 */
  transform: rotate(-30deg);  /* 반시계 방향으로 30도 회전 */

• 특징:
  • 양수 → 시계 방향 회전
  • 음수 → 반시계 방향 회전

---

📍 복합 변환 적용하기

여러 개의 transform을 한 번에 적용할 수도 있음.

transform: translateX(20px) scale(1.2) rotate(30deg);

• 순서대로 적용:
  1. 20px 이동
  2. 1.2배 확대
  3. 30도 회전

---

💡 Tip

• transform은 레이아웃에 영향을 주지 않고 요소만 시각적으로 변형
• 변형 효과를 부드럽게 하려면 transition과 함께 사용하면 효과적!
• 복잡한 애니메이션은 @keyframes와 조합하면 더 강력한 기능 제공

---

✅ 예제

.box {
  width: 100px;
  height: 100px;
  background: lightblue;
  transform: translate(50px, 20px); /* 오른쪽 50px, 아래로 20px 이동 */
}

이렇게 하면 .box 요소가 지정한 거리만큼 이동하면서 변형됨