translateX 함수

translateX 함수는 요소를 X축을 따라 이동시킵니다. transform 속성과 함께 사용됩니다. 속성 값은 크기 단위를 사용합니다. 양수 값은 오른쪽으로, 음수 값은 왼쪽으로 이동시킵니다.

구문

css선택자 {
  transform: translateX(이동량);
}

예시

블록에 마우스를 올리면 30px 오른쪽으로 이동합니다:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateX(30px);
}

Результат:

예시

블록에 마우스를 올리면 30px 왼쪽으로 이동합니다:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateX(-30px);
}

Результат:

함께 보기