CSS의 translate() 함수는 요소를 수평(X축)과 수직(Y축) 방향으로 이동시켜 화면상의 위치를 다시 배치하는 데 사용되는 2D 변형(transform) 함수입니다. 마진이나 포지셔닝처럼 레이아웃 구조를 변경하지 않고도 요소를 자유롭게 움직일 수 있어, 애니메이션·호버 효과·툴팁 정렬 등 다양한 상황에서 널리 활용됩니다.
기본 문법
transform: translate(tx, ty);
- tx — X축(가로) 이동 거리: 양수면 오른쪽, 음수면 왼쪽으로 이동합니다.
- ty — Y축(세로) 이동 거리: 양수면 아래쪽, 음수면 위쪽으로 이동합니다. 생략하면 0으로 처리됩니다.
이동 거리는 px, em, rem 등의 길이 단위 또는 백분율(%)로 지정할 수 있습니다. 특히 백분율 값은 부모 요소가 아닌 요소 자신의 크기를 기준으로 계산된다는 점에 유의하세요.
예제 1: 픽셀(px) 단위로 이동하기
아래 예제에서는 이미지를 X축 방향으로 50px 이동시킵니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
.translate_img {
transform: translate(50px, 0);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p id="demo1">Excel vlookup</p>
<p id="demo2">Excel filters</p>
<h4>Learn Excel</h4>
<img class="translate_img" src=
"https://www.tutorialspoint.com/videotutorials/assets/videos/courses/42/images/course_42_image.png"
alt="MS Excel">
</body>
</html>
실행 결과
예제 2: 백분율(%) 단위로 이동하기
이번 예제는 이미지를 X축으로 100px, Y축으로 요소 높이의 50%만큼 이동시킵니다. 백분율 값을 사용하면 요소 크기에 비례해 이동하므로 반응형 레이아웃에서 특히 유용합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
transform: translate(100px, 50%);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="translate_img" src=
"https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png"
alt="MongoDB">
</body>
</html>
실행 결과
마무리 정리
translate() 함수는 문서의 일반적인 흐름(normal flow)에 영향을 주지 않기 때문에, 인접한 다른 요소들의 배치는 그대로 유지됩니다. 또한 transform 속성은 GPU 가속을 활용하므로 top/left 속성을 변경하는 방식보다 애니메이션 성능이 뛰어나다는 장점이 있습니다. 요소를 부드럽게 이동시키는 UI 효과를 구현할 때는 translate()를 우선적으로 고려해 보세요.