# Функция translateY

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

## Синтаксис

`селектор { transform: translateY(сдвиг); }`

## Пример

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

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

:

## Пример

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

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

:

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

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

← →
↑
en ru