translateY 함수

translateY 함수는 요소를 Y축을 따라 이동시킵니다. transform 속성과 함께 사용됩니다. 속성 값으로는 크기 단위를 사용할 수 있습니다. 양수 값은 아래로, 음수 값은 위로 이동시킵니다.

문법

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

예시

블록에 마우스를 올리면 블록이 아래로 30px 이동합니다:

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

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

Результат:

예시

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

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

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

Результат:

같이 보기