Функция CSS translate()

Определение и использование

CSS translate() Функция позволяет изменять положение элемента.

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

Пример

Изменение位置的 элемента:

#myDiv1 {
  transform: translate(50px); /* Перемещает элемент на 50px по оси X и 0px по оси Y */
}
#myDiv2 {
  transform: translate(50px, 20px); /* Перемещает элемент на 50px по оси X и 20px по оси Y */
}
#myDiv3 {
  transform: translate(100px, 30px); /* Перемещает элемент на 100px по оси X и 30px по оси Y */
}

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

CSS грамматика

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

Опционально. Определяет расстояние перемещения элемента по оси Y, может быть числом или процентом.

Если пропущен, значение устанавливается в 0.

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

Версия: CSS Transforms Module Level 1

Поддержка браузерами

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

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

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

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

См. также:Свойство transform в CSS

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

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

См. также:Свойство transform в HTML DOM