# Функция translate

Функция `translate` задает сдвиг элемента по оси X и оси Y. Используется совместно со свойством `transform`. Значением свойства служат любые единицы для размера.

Может принимать один или два параметра. Если параметров два - первый параметр задает сдвиг по оси X, а второй - по оси Y. Если параметр один, то он задает сдвиг по оси X.

Значения параметров могут быть положительными и отрицательными. Положительное значение по оси X сдвигает вправо, отрицательное - влево. Положительное значение по оси Y сдвигает вниз, отрицательное - вверх.

## Синтаксис

`селектор { transform: translate(сдвиг по оси X, сдвиг по оси Y); }`

## Пример

Если навести мышкой на блок - он сдвинется на `30px` вправо:

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

:

## Пример

Если навести мышкой на блок - он сдвинется на `30px` влево:

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

:

## Пример

Если навести мышкой на блок - он сдвинется на `15px` вправо и на `30px` вниз:

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

:

## Смотрите также

- функцию `translateX`,
  которая задает сдвиг по оси X
- функцию `translateY`,
  которая задает сдвиг по оси Y

← →
↑
en ru