들어가며: 왜 translateX()인가?
웹 개발을 하다 보면 요소를 좌우로 부드럽게 움직여야 할 때가 많습니다. 사이드바 슬라이드, 배너 마퀴, 로딩 스켈레톤 등이 대표적이죠. 이때 가장 간단하고 성능 좋은 방법이 바로 CSS transform: translateX()입니다.
translateX()는 요소를 수평 방향으로 이동시키는 CSS 함수입니다. transform 프로퍼티 안에서 사용되며, 양수 값이면 오른쪽으로, 음수 값이면 왼쪽으로 이동합니다. 레이아웃에 영향을 주지 않으면서 시각적인 이동만 담당하기 때문에, 애니메이션 성능이 중요한 모바일 환경에서 특히 유용합니다.
이 글에서는 translateX()의 기본 문법부터 실무에서 자주 쓰는 예제, 그리고 주의해야 할 포인터 이벤트 문제까지 하나씩 살펴보겠습니다.
🔗 이 글의 내용은 CSS-Tricks의 translateX() 문서를 기반으로 재구성했으며, 실제 프로젝트에 바로 적용할 수 있도록 한국 개발자 관점에서 설명을 덧붙였습니다.
기본 문법과 사용법
translateX()는 하나의 인자를 받습니다. 인자는 길이 단위(px, em, ch 등) 또는 백분율(%)을 사용할 수 있습니다.
- 길이 단위: 양수면 오른쪽, 음수면 왼쪽으로 픽셀만큼 이동합니다.
- 백분율: 요소 자신의 **너비(width)**를 기준으로 이동합니다. 예를 들어 너비가 400px인 요소에
translateX(50%)를 적용하면 200px 오른쪽으로 이동합니다.
/* 요소를 오른쪽으로 80px 이동 */
.translate-right {
transform: translateX(80px);
}
/* 요소를 왼쪽으로 24ch 이동 */
.translate-left {
transform: translateX(-24ch);
}
/* 요소를 자기 너비의 50%만큼 오른쪽으로 이동 */
.translate-half {
transform: translateX(50%);
}
실전 예제: 사이드바 슬라이드
가장 흔한 사용처는 버튼 클릭 시 사이드바를 슬라이드하는 기능입니다. 처음에 사이드바를 화면 밖으로 숨겨두고, 클릭하면 다시 들어오게 만듭니다.
.sidebar {
transform: translateX(-100%);
transition: transform 0.2s ease-in;
}
.sidebar.open {
transform: translateX(0);
}
실전 예제: 무한 마퀴(Marquee)
쇼핑몰 배너나 고객사 로고를 자동으로 스크롤할 때도 translateX()가 유용합니다. 마퀴 콘텐츠를 50%만큼 왼쪽으로 이동시키는 애니메이션을 무한 반복하면 됩니다.
.marquee-content {
animation: marquee-scroll 20s linear infinite;
}
@keyframes marquee-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
실전 예제: 스켈레톤 로딩 애니메이션
콘텐츠가 로딩되는 동안 보여주는 스켈레톤 로더에 빛이 지나가는 효과를 넣을 수 있습니다. ::after 가상 요소를 만들어 translateX()로 이동시키면 됩니다.
.skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-120%);
background: linear-gradient(90deg, transparent, var(--skel-highlight), transparent);
animation: shimmer 1.15s linear infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-120%);
}
100% {
transform: translateX(120%);
}
}
주의사항: 레이아웃 영향과 포인터 이벤트 문제
레이아웃에 영향을 주지 않는다
translateX()는 다른 transform 함수와 마찬가지로 문서 흐름(document flow)에 영향을 주지 않습니다. 요소가 이동해도 주변 요소들의 위치는 그대로이고, 원래 자리에는 공간이 유지됩니다. margin이나 position을 조작할 때 발생하는 레이아웃 리플로우(reflow)가 없어서 성능상 이점이 큽니다.
/* 이동된 요소 */
.translated {
position: absolute;
top: 0;
left: 0;
transform: translateX(80px);
}
포인터 가상 클래스와의 충돌
translateX()를 :hover 같은 포인터 가상 클래스에 직접 적용하면 문제가 생길 수 있습니다. 요소가 커서에서 멀어지면 :hover 상태가 해제되고, 요소가 원래 위치로 돌아오면 다시 :hover가 적용되면서 무한 깜빡임이 발생합니다.
문제 코드:
.bad:hover {
transform: translateX(160px);
}
해결 방법:
부모 요소에 :hover를 적용하고, 자식 요소를 이동시키는 구조로 바꾸면 깜빡임을 방지할 수 있습니다.
.parent:hover .good {
transform: translateX(160px);
}
이 패턴은 반드시 기억해두세요. 실무에서 툴팁이나 드롭다운을 만들 때 자주 겪는 이슈입니다.
브라우저 지원
translateX()는 모든 모던 브라우저에서 기본적으로 지원됩니다. IE를 제외하면 사실상 제약이 없다고 보면 됩니다.
한국 개발자 관점에서의 적용 팁
국내 서비스에서도 translateX()는 매우 자주 사용됩니다. 특히 모바일 웹에서 햄버거 메뉴를 열 때 사이드바를 슬라이드하거나, 배너 캐러셀을 부드럽게 넘길 때 유용합니다.
다만, 한국 모바일 환경에서는 저사양 기기 비율이 높기 때문에 애니메이션 성능에 주의해야 합니다. transform은 GPU 가속을 받기 때문에 margin-left나 left 값 변경보다 훨씬 부드럽지만, 너무 많은 요소에 동시에 적용하면 오히려 프레임 드랍이 발생할 수 있습니다. 애니메이션 중에는 불필요한 레이아웃 변경을 피하고, 가능하면 will-change를 적절히 활용하세요.
또한, 한국 웹 환경에서는 IE 지원이 아직 필요한 경우가 간혹 있습니다. IE에서는 transform이 접두사 없이 지원되지 않으므로, 필요한 경우 -ms-transform을 추가하는 것을 고려해야 합니다.
결론: 실무 적용 정리
translateX()는 단순하지만 매우 강력한 CSS 함수입니다. 레이아웃에 영향을 주지 않으면서 요소를 수평으로 이동시킬 수 있고, 애니메이션 성능도 우수합니다.
- 사이드바 슬라이드:
translateX(-100%)로 숨겼다가translateX(0)으로 표시 - 무한 마퀴:
translateX(-50%)를 반복하는 키프레임 사용 - 스켈레톤 로더:
::after에translateX()로 광택 효과 - 포인터 이벤트 문제: 부모에
:hover적용
다음 단계로는 translateY() 및 scale(), rotate() 등 다른 transform 함수를 함께 사용하는 방법을 학습해보세요. 또한 CSS 애니메이션 성능 최적화에 관심이 있다면 Web Fundamentals의 애니메이션 가이드를 참고하면 좋습니다.