# translate function

The `translate` function sets an element reposition along the X- and Y-axis. It is used together with the `transform` property. The property value is any size units.

It can take one or two parameters. If there are two parameters, the first parameter specifies the reposition along the X-axis, and the second - along the Y-axis. If there is single parameter, it specifies the reposition along the X-axis.

Parameter values ​​can be positive and negative. A positive value on the X-axis shifts to the right, a negative value shifts to the left. A positive value on the Y-axis shifts down, a negative value shifts up.

## Syntax

`selector { transform: translate(reposition along X-axis, reposition along Y-axis); }`

## Example

If you hover over the block, it will move `30px` to the right:

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

:

## Example

If you hover over the block, it will move `30px` to the left:

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

:

## Example

If you hover over the block, it will move `15px` to the right and `30px` down:

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

:

## See also

- the `translateX` function
  that specifies a reposition along the X-axis
- the `translateY` function
  that specifies a reposition along the Y-axis

← →
↑
en ru