CSS transform으로 무엇을 할 수 있나요?

Question

Accepted Answer

`transform` 속성은 문서 레이아웃에 영향을 주지 않고(다른 요소가 이동하지 않음) 요소를 시각적으로 **이동, 확대/축소, 회전, 기울이기**할 수 있게 해줍니다. GPU 가속되어 애니메이션에 이상적입니다.

```css
.box { transform: translate(50px, 20px); }  /* 오른쪽 50px, 아래로 20px 이동 */
.box { transform: scale(1.5); }              /* 1.5배 크게 (0.5 = 절반) */
.box { transform: rotate(45deg); }           /* 시계 방향 45° 회전 */
.box { transform: skew(10deg); }             /* 기울임 */
```

## transform 결합하기 (순서가 중요)

```css
.box {
  transform: translateX(100px) rotate(45deg) scale(1.2);
  /* 오른쪽에서 왼쪽으로 적용: scale, 그다음 rotate, 그다음 translate */
}
```

여러 함수가 순서대로 적용되며, 순서를 바꾸면 결과가 달라집니다(회전 후 이동은 이동 후 회전과 다릅니다).

## transform이 레이아웃을 방해하지 않는 이유

```css
.icon:hover { transform: scale(1.2); } /* 호버 시 커지지만 이웃은 움직이지 않음 */
```

`width`/`margin` 변경과 달리, transform은 요소의 *그려진* 모습에만 영향을 주고 흐름 속 box에는 영향을 주지 않습니다 — 그래서 주변 요소가 그대로 있고 reflow가 없습니다. 이것이 정확히 transform이 부드러운 이유입니다.

## 흔한 패턴

```css
/* absolute로 위치한 요소를 가운데 정렬 */
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* 호버 시 떠오름 */
.card:hover { transform: translateY(-4px); }

/* 3D와 perspective */
.card { transform: perspective(500px) rotateY(15deg); }
```

`translate(-50%, -50%)` 가운데 정렬 트릭은 어디에나 있습니다 — 요소를 *자기 자신* 크기의 절반만큼 되돌립니다.

## 성능

```css
/* ✅ transform + opacity는 GPU에서 합성됨 — 이들을 애니메이션하세요 */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
```

transform은 레이아웃과 paint를 건너뛰므로(합성만), 애니메이션이 60fps를 유지합니다 — 위치/크기 애니메이션보다 훨씬 저렴합니다.

## 왜 중요한가

transform은 CSS 애니메이션과 마이크로 인터랙션(호버 떠오름, 모달, 캐러셀, 로딩 스피너)의 주력입니다.

레이아웃을 유발하지 않고 이동/확대/회전하므로 강력하면서도 성능이 좋습니다 — 웹에서 모션을 애니메이션하는 권장 방법입니다.