# 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

`selector { transform: translateY(reposition); }`

## Example

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

`<div id="elem"></div>` `#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`:

`<div id="elem"></div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: translateY(-30px); }`

:

## See also

- the `translate` function
  that specifies a reposition along the X- and Y-axes
- the `translateX` function
  that specifies a reposition along the X-axis

← →
↑
en ru