The translateY function

The translateY function sets an element reposition along the Y-axis. It is used together with the transform property. The property value is any size units. A positive value shifts down, a negative value shifts up.

Syntax

cssselector {
  transform: translateY(reposition);
}

Example

If you hover over the block, it will move down by 30px:

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

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

Результат:

Example

If you hover over the block, it will move up by 30px:

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

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

Результат:

See also