transform

정적인 요소를 움직이고 회전시키는 transform 속성은 웹 디자인에 생동감을 불어넣는 마법과 같습니다.

---

1. CSS transform의 정의

transform은 단어 뜻 그대로 요소의 모양, 크기, 위치, 회전을 시각적으로 변경할 때 사용하는 속성입니다.

이 속성의 가장 큰 특징은 요소가 페이지의 일반적인 흐름(레이아웃)을 방해하지 않으면서 시각적으로만 변화를 준다는 점입니다.

따라서 다른 주변 요소들에 영향을 주지 않고도 자유롭게 변형할 수 있어 애니메이션 구현에 매우 효율적입니다.

---

2. transform의 중요 함수 (Functions)

transform 속성 뒤에는 다양한 함수를 붙여 어떤 변형을 줄지 결정합니다.

• translate(x, y): 요소를 현재 위치에서 지정한 거리만큼 이동시킵니다.
• scale(x, y): 요소를 지정한 배수만큼 확대 또는 축소합니다. (1보다 크면 확대, 작으면 축소)
• rotate(deg): 요소를 지정한 각도만큼 회전시킵니다. (예: 45deg)
• skew(x, y): 요소를 지정한 각도만큼 비틀어서 왜곡합니다.

---

3. 함께 사용하는 중요 속성

함수 외에도 변형의 기준이나 방식을 정하는 중요한 속성들이 있습니다.

• transform-origin: 변형이 시작되는 기준점을 정합니다. 기본값은 정중앙(50% 50%)이지만, 왼쪽 위나 오른쪽 아래 등으로 바꿀 수 있습니다.
• transition: transform이 일어날 때 부드럽게 변하는 과정을 보여줍니다. (애니메이션 효과의 필수 파트너)

---

4. 실전 예제 코드: "마우스를 올리면 변하는 버튼"

가장 많이 쓰이는 '호버 효과'를 통해 transform의 강력함을 확인해 보세요.

CSS

 

.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  /* 부드러운 변화를 위해 transition 추가 */
  transition: transform 0.3s ease;
}

/* 마우스를 올렸을 때(hover) 변형 발생 */
.box:hover {
  /* 오른쪽으로 20px 이동, 1.2배 확대, 10도 회전 */
  transform: translate(20px, 0) scale(1.2) rotate(10deg);
}

---

📋 transform 함수 요약표

함수	역할	단위	예시
translate	위치 이동	px, %	translateX(50px)
scale	크기 조절	배수(숫자)	scale(1.5)
rotate	회전	deg	rotate(180deg)
skew	기울기(비틀기)	deg	skewY(20deg)

---

학습 정리

• **transform**은 요소의 물리적 공간을 차지하지 않고 시각적인 형태만 바꾼다.
• 여러 함수를 공백으로 구분하여 동시에 적용할 수 있다.
• **transition**과 결합하면 복잡한 자바스크립트 없이도 멋진 애니메이션을 만들 수 있다.

---

웹 페이지에 생동감을 더하는 CSS transform의 기초를 정복하셨습니다!

---

---

CSS transform 속성의 각 주요 함수들이 실제로 어떻게 쓰이는지, 바로 복사해서 확인해 보실 수 있는 개별 예제 코드를 준비했습니다.

각 예제는 마우스를 올렸을 때(:hover) 변화가 나타나도록 구성하여 효과를 체감하기 쉽게 만들었습니다.

---

1. translate (이동) 예제

요소를 현재 위치에서 X축(가로)이나 Y축(세로)으로 밀어냅니다.

CSS

 

.move-box {
  width: 100px;
  height: 100px;
  background-color: #ff6b6b;
  transition: transform 0.3s;
}

/* 마우스를 올리면 오른쪽으로 50px, 위쪽으로 20px 이동 */
.move-box:hover {
  transform: translate(50px, -20px);
}

---

2. scale (확대/축소) 예제

요소의 크기를 비율로 조절합니다. 1이 기준이며, 1.5는 150%, 0.5는 50% 크기를 의미합니다.

CSS

 

.scale-box {
  width: 100px;
  height: 100px;
  background-color: #4ecdc4;
  transition: transform 0.3s;
}

/* 마우스를 올리면 전체 크기가 1.2배 커짐 */
.scale-box:hover {
  transform: scale(1.2);
}

/* 팁: 가로만 키우고 싶다면 scaleX(1.5), 세로만 키우고 싶다면 scaleY(1.5) */

---

3. rotate (회전) 예제

요소를 시계 방향(양수) 또는 시계 반대 방향(음수)으로 돌립니다.

CSS

 

.rotate-box {
  width: 100px;
  height: 100px;
  background-color: #feca57;
  transition: transform 0.5s;
}

/* 마우스를 올리면 시계 방향으로 45도 회전 */
.rotate-box:hover {
  transform: rotate(45deg);
}

---

4. skew (비틀기) 예제

요소의 면을 잡아당겨 평행사변형 형태로 왜곡합니다.

CSS

 

.skew-box {
  width: 100px;
  height: 100px;
  background-color: #a29bfe;
  transition: transform 0.3s;
}

/* 마우스를 올리면 X축 방향으로 20도 기울어짐 */
.skew-box:hover {
  transform: skewX(20deg);
}

---

💡 여러 함수 한 번에 쓰기 (복합 변형)

여러 효과를 동시에 주고 싶을 때는 공백 한 칸을 띄우고 나열하면 됩니다.

CSS

 

.multi-box {
  width: 100px;
  height: 100px;
  background-color: #ff9f43;
  transition: transform 0.4s;
}

/* 커지면서 회전하고 이동까지 동시에 수행 */
.multi-box:hover {
  transform: scale(1.3) rotate(360deg) translate(30px, 30px);
}

---

연습 팁

• **transition: 0.3s;**를 꼭 추가해 보세요. 이 코드가 없으면 애니메이션 없이 결과값으로 뚝딱 변하게 됩니다.
• 단위를 잊지 마세요. translate는 px나 %, rotate와 skew는 deg 단위를 반드시 써야 작동합니다.

---

각 함수별 실전 예제까지 마스터하셨습니다!

---