CSS3 translateX() 메서드로 x축 방향 요소 변환하기

CSS3에서는 translateX(x) 메서드를 사용해 요소를 x축(가로) 방향으로 이동시킬 수 있습니다. 요소의 위치를 변경하면서도 문서 흐름에는 영향을 주지 않기 때문에 애니메이션이나 인터랙티브 UI 제작에 널리 활용됩니다.

translateX() 기본 문법

translateX(x)

여기서 각 값의 의미는 다음과 같습니다.

• x: 변환 벡터의 x좌표(가로 이동 거리)를 나타내는 길이 값입니다. px, em, rem 등의 단위를 사용할 수 있으며, 양수는 오른쪽, 음수는 왼쪽으로 요소를 이동시킵니다.

사용 예제

아래 예제에서는 검은색 정사각형 div 요소를 만들고, .trans 클래스가 적용된 요소를 x축 방향으로 20px만큼 이동시키면서 배경색을 주황색으로 변경합니다.

div {
   width: 40px;
   height: 40px;
   background-color: black;
}
.trans {
   transform: translateX(20px);
   background-color: orange;
}

참고 사항

transform 속성으로 요소를 이동하면 원래 자리는 그대로 유지되며, 레이아웃에 영향을 주지 않습니다. 또한 GPU 가속을 활용할 수 있어 margin이나 position 변경보다 부드러운 애니메이션 성능을 기대할 수 있습니다.