# Функция translateX

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

## Синтаксис

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

## Пример

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

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

:

## Пример

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

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

:

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

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

← →
↑
en ru