Перевод

Базовая версия 2022

Новая версия

С августа 2022 года эта функция работает на последних версиях устройств и браузеров. Возможно, эта функция не будет работать на старых устройствах или браузерах.

Свойство translate CSS позволяет задавать трансформации смещения индивидуально и независимо от свойства transform. Это лучше соответствует типичному использованию пользовательского интерфейса и позволяет избежать необходимости запоминать точный порядок функций трансформации для указания в значении transform.

Попробовать

Синтаксис

/* Keyword values */
translate: none;

/* Single values */
translate: 100px;
translate: 50%;

/* Two values */
translate: 100px 200px;
translate: 50% 105px;

/* Three values */
translate: 50% 105px 5rem;

/* Global values */
translate: inherit;
translate: initial;
translate: revert;
translate: revert-layer;
translate: unset;

Значения

Одно <length-percentage> значение: Значение <length> или <percentage>, которое определяет смещение вдоль оси X. Эквивалентно функции translate() (2D смещение) с указанным единственным значением.
Два <length-percentage> значения: Два значения <length> или <percentage>, которые определяют значения смещения по осям X и Y (соответственно) 2D смещения. Эквивалентно функции translate() (2D смещение) с указанными двумя значениями.
Три значения: Два значения <length-percentage> и одно значение <length>, которые определяют значения смещения по осям X, Y и Z (соответственно) 3D смещения. Эквивалентно функции translate3d() (3D смещение).
none: Указывает, что смещение не должно применяться.

Формальное определение

Начальное значение	`none`
Применимо к	элементам, к которым можно применить трансформацию
Наследуется	нет
Проценты	относительно размеров области отображения
Вычисленное значение	как указано, но с относительными единицами измерения, преобразованными в абсолютные
Тип анимации	трансформация
Создаёт контекст стекирования	да

Формальный синтаксис

translate = 
  none                                                |
  <length-percentage> [ <length-percentage> <length>? ]?  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Смещение элемента при наведении

В этом примере показано, как использовать свойство translate для перемещения элемента по трём осям. Первый прямоугольник перемещается вдоль оси X, а второй — вдоль осей X и Y. Третий прямоугольник перемещается вдоль осей X, Y и Z и создаёт впечатление движения к зрителю благодаря добавлению perspective к родительскому элементу.

HTML

<div class="wrapper">
  <div id="box1">translate X</div>
  <div id="box2">translate X,Y</div>
  <div id="box3">translate X,Y,Z</div>
</div>

CSS

.wrapper {
  perspective: 100px;
  display: inline-flex;
  gap: 1em;
}
.wrapper > div {
  width: 7em;
  line-height: 7em;
  text-align: center;
  transition: 0.5s ease-in-out;
  border: 3px dotted;
}
#box1:hover {
  translate: 20px;
}

#box2:hover {
  translate: 20px 20px;
}

#box3:hover {
  translate: 5px 5px 30px;
}

Результат

Спецификации

Спецификация
CSS Transforms Module Level 2 # individual-transforms

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`translate`	104	104	72	90	14.1	104	79	71	14.5	20.0	104
`none`	104	104	72	90	14.1	104	79	71	14.5	20.0	104

См. также

Примечание: наклон не является независимым значением трансформации

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/translate