transform 속성은 문서 레이아웃에 영향을 주지 않고(다른 요소가 이동하지 않음) 요소를 시각적으로 이동, 확대/축소, 회전, 기울이기할 수 있게 해줍니다. GPU 가속되어 애니메이션에 이상적입니다.
css
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* 오른쪽에서 왼쪽으로 적용: scale, 그다음 rotate, 그다음 translate */
}
여러 함수가 순서대로 적용되며, 순서를 바꾸면 결과가 달라집니다(회전 후 이동은 이동 후 회전과 다릅니다).
.icon:hover { transform: scale(1.2); } /* 호버 시 커지지만 이웃은 움직이지 않음 */
width/margin 변경과 달리, transform은 요소의 그려진 모습에만 영향을 주고 흐름 속 box에는 영향을 주지 않습니다 — 그래서 주변 요소가 그대로 있고 reflow가 없습니다. 이것이 정확히 transform이 부드러운 이유입니다.
/* 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%) 가운데 정렬 트릭은 어디에나 있습니다 — 요소를 자기 자신 크기의 절반만큼 되돌립니다.
/* ✅ transform + opacity는 GPU에서 합성됨 — 이들을 애니메이션하세요 */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
transform은 레이아웃과 paint를 건너뛰므로(합성만), 애니메이션이 60fps를 유지합니다 — 위치/크기 애니메이션보다 훨씬 저렴합니다.
transform은 CSS 애니메이션과 마이크로 인터랙션(호버 떠오름, 모달, 캐러셀, 로딩 스피너)의 주력입니다.
레이아웃을 유발하지 않고 이동/확대/회전하므로 강력하면서도 성능이 좋습니다 — 웹에서 모션을 애니메이션하는 권장 방법입니다.