Рекомендуемый курс:

Функция CSS translateX()

Определение и использование в CSS translateX() Функция позволяет вам переместить элемент по оси x (горизонтальному направлению).

translateX() Функция в transform Используется в свойстве.

Пример

Перемещение различных элементов <div> в горизонтальном направлении:

#myDiv1 {
  transform: translateX(50px); /* Перемещает элемент на 50px по оси x */
}
#myDiv2 {
  transform: translateX(100px); /* Перемещает элемент на 100px по оси x */
}
#myDiv3 {
  transform: translateX(-10px); /* Перемещает элемент на -10px по оси x */
}

Попробуйте сами

Грамматика CSS

translateX(x)
Значение Описание
x Обязателен. Определяет расстояние перемещения элемента по оси x, может быть числом или процентом.

Технические детали

Версия: Модуль преобразований CSS уровня 1

Поддержка браузеров

Числа в таблице показывают версию первого браузера, который полностью поддерживает эту функцию.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Соответствующие страницы

Урок:2D-трансформации CSS

См. также:Атрибут CSS transform

См. также:Функция CSS translate()

См. также:Функция CSS translateY()

См. также:Атрибут transform HTML DOM