CSS translateX() 함수

정의와 사용법

CSS의 translateX() 함수는 요소를 x축(수평 방향)에 따라 다시 정위치시키는 데 사용됩니다.

translateX() 함수가 transform 속성에서 사용됩니다.

예제

수평 방향으로 다른 <div> 요소를 다시 정위치시킵니다：

#myDiv1 {
  transform: translateX(50px); /* 요소를 x축에 따라 50px 이동시킵니다 */
}
#myDiv2 {
  transform: translateX(100px); /* 요소를 x축에 따라 100px 이동시킵니다 */
}
#myDiv3 {
  transform: translateX(-10px); /* 요소를 x축에 따라 -10px 이동시킵니다 */
}

직접 시험해 보세요

CSS 문법

translateX(x)

기술 세부 사항

브라우저 지원

표格에서의 숫자는 첫 번째로 이 함수를 완전히 지원하는 브라우저 버전을 나타냅니다.

관련 페이지

강의:CSS 2D 변환

참조:CSS 트랜스폼 속성

참조:CSS 트랜스라이드() 함수

참조:CSS 트랜스라이드이() 함수

참조:HTML DOM 트랜스폼 속성