translate 함수

translate 함수는 요소를 X축과 Y축으로 이동시킵니다. transform 속성과 함께 사용됩니다. 속성 값으로는 크기 단위를 사용할 수 있습니다.

하나 또는 두 개의 매개변수를 가질 수 있습니다. 매개변수가 두 개인 경우 첫 번째 매개변수는 X축 이동을, 두 번째는 Y축 이동을 지정합니다. 매개변수가 하나인 경우 X축 이동을 지정합니다.

매개변수 값은 양수 또는 음수일 수 있습니다. X축 양수 값은 오른쪽으로, 음수 값은 왼쪽으로 이동시킵니다. Y축 양수 값은 아래로, 음수 값은 위로 이동시킵니다.

구문

css선택자 {
  transform: translate(X축 이동, Y축 이동);
}

예시

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

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

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

Результат:

예시

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

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

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

Результат:

예시

블록에 마우스를 가져가면 15px 오른쪽으로 그리고 30px 아래로 이동합니다:

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

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

Результат:

함께 보기