Свойство translate в CSS

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

translate свойство позволяет изменить положение элемента.

translate свойство определяет координаты x- и y-осей элемента в двумерном пространстве. Вы также можете определить координату z-оси, чтобы изменить положение в трёхмерном пространстве.

координаты могут быть даны только по координате x-оси, или по координатам x- и y-осей, или по координатам x-, y- и z-осей.

чтобы лучше понять translate свойства, пожалуйста, посмотритедемонстрация.

подсказка:чтобы осевые свойства z-axis вступили в силу, вам нужно определить значение для свойства CSS perspective.

обратите внимание:другой техникой для трансляции элементов является использование с Функция translate() в CSS в данном случае CSS свойство transform можно сказать, что это более простая и прямая методика для трансляции элементов.

пример

пример 1

изменение положения элементов:

div {
  translate: 100px 20px;
}

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

пример 2

при установке оси z translate свойства, необходимо также установить их в родительском элементе perspective только с помощью свойств, мы можем увидеть какие-либо эффекты:

DIV1 {
  perspective: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

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

CSS синтаксис

translate: x-axis y-axis z-axis|initial|inherit;

значение свойства

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

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

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

связанные страницы

CSS учебник:2D преобразования в CSS

CSS учебник:3D преобразования в CSS

CSS справочник:Атрибут CSS scale

CSS справочник:Атрибут CSS rotate

CSS справочник:Атрибут CSS perspective