CSS translateX() 함수로 X축 방향 요소 변환하기

CSS의 translateX() 함수를 사용하면 요소를 X축(가로 방향)으로 자유롭게 이동시킬 수 있습니다. 이 함수는 CSS transform 속성과 함께 사용되며, 2D 및 3D 변환의 기본이 되는 중요한 기능입니다.

translateX() 문법

기본 문법은 다음과 같습니다.

translateX(n)

여기서 n은 이동 벡터의 x좌표(가로 위치)를 나타내는 길이 값입니다. px, em, rem, % 등 다양한 단위를 사용할 수 있으며, 음수 값을 지정하면 왼쪽 방향으로 이동합니다.

사용 예제

아래 예제는 검은색 사각형 요소를 만들고, .trans 클래스가 적용된 요소를 오른쪽으로 20px 이동시키면서 배경색을 주황색으로 변경하는 코드입니다.

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

위 코드를 실행하면 원래 위치에서 오른쪽으로 20px만큼 밀려난 주황색 사각형을 확인할 수 있습니다.

참고 사항

translateX()는 요소의 레이아웃에 영향을 주지 않고 시각적으로만 이동시키기 때문에, 애니메이션 효과를 구현할 때 성능 면에서 유리합니다. 또한 translateY()(세로 이동), translate(x, y)(가로·세로 동시 이동) 함수와 함께 활용하면 더욱 다양한 변환 효과를 만들 수 있습니다.