translate

Определение и применение

Свойство translate сдвигает отрисованный элемент по одной, двум или трём осям. Оно позволяет менять положение независимо от поворота и масштаба, не переписывая всю строку transform.

Как сдвигать элемент независимо от поворота и масштаба — в уроке «Трансформация элементов. Часть 1: двухмерные преобразования».

Попробуйте значения translate

Пунктир показывает исходное место плашки. При сдвиге оно сохраняется; 50% отсчитывается от ширины самой плашки.

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

translate: none

HTML и CSS примера
HTML
<div class="stage">
  <div class="reference">
    <div class="demo-target" style="transform-origin: center">Тони →</div>
  </div>
  <p>Место в потоке сохранено</p>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.stage {
  padding: 35px 20px;
}
.reference {
  width: 140px;
  height: 80px;
  margin: 25px auto;
  border: 2px dashed #52697d;
}
.demo-target {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #9bd3ec;
  border: 2px solid #245a85;
  translate: none;
}
p {
  font-size: 13px;
  margin-top: 42px;
}

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

Спецификация: CSS transforms-2

Поддерживается во всех основных браузерах с 2023 года.

Показать браузеры
Совместимостьcss.properties.translate
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
translate✓104✓104✓72✓90✓14.1✓104✓79✓71✓14.5✓20.0✓104✓14.5
none✓104✓104✓72✓90✓14.1✓104✓79✓71✓14.5✓20.0✓104✓14.5

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
translate: none | <length-percentage> [ <length-percentage> <length>? ]?;

/* Глобальные значения */
translate: initial | inherit | unset | revert | revert-layer;

| разделяет варианты, квадратные скобки группируют части, ? делает часть необязательной. Первая координата — X, вторая — Y, третья — Z. <length-percentage> — длина или процент; координата Z допускает только длину.

JavaScript синтаксис:

JavaScript
element.style.translate = "24px 12px";

Начальное значение свойства

none.

Значения свойства

Значения translate
Значение Описание
none Отдельный сдвиг отсутствует. Само это значение не создаёт контекст наложения. Начальное значение.
<length-percentage> Сдвиг по X; Y и Z равны нулю. Процент X берётся от ширины опорной области самого элемента.
<length-percentage> <length-percentage> Сдвиг по X и Y. Процент Y берётся от высоты опорной области самого элемента. Отрицательные значения сдвигают в обратную сторону.
<length-percentage> <length-percentage> <length> Добавляет сдвиг по Z. Для заметной разницы глубины обычно нужна перспектива.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства translate устанавливает его начальное значение свойства.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Как свойство сочетается с другими преобразованиями

Проценты позволяют центрировать элемент без знания его размера: left: 50%; top: 50%; translate: -50% -50%. Первые проценты позиционирования относятся к содержащему блоку, проценты сдвига — к опорной области самого элемента. Её выбор связан с transform-box; у обычного HTML-блока это обычно область рамки.

Браузер применяет отдельные свойства в фиксированном порядке: translate, затем rotate, затем scale, после них — список transform. Порядок строк в CSS этот порядок не меняет. Если нужны другие последовательности, используйте функции в transform или вложенные элементы.

Любое значение кроме none, даже визуально нейтральное, создаёт контекст наложения и содержащий блок для позиционированных потомков. Преобразование не действует на обычный незаменяемый строчный элемент: для короткой плашки можно задать display: inline-block.

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

CSS Transforms — translate.

Наследуется

Нет.

Анимируемое

Да, как преобразование сдвига. При интерполяции none соответствует нулевому сдвигу.

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

Сдвиг без изменения потока

Измените координаты на 50% 0, затем на 0 50%. Процент берётся от размеров самой плашки. Соседний текст не занимает её исходное место.

base.css
CSS
body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
.frame {
    width: 180px;
    height: 120px;
    margin: 48px;
    border: 2px dashed #64748b;
}
.sample {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: #bfdbfe;
    border: 2px solid #2563eb;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Сдвиг без изменения потока</title>
  </head>
  <body>
    <div class="frame"><div class="sample">Тони</div></div>
    <p>Следующий абзац остаётся на своём месте.</p>
  </body>
</html>
style.css
CSS
.sample {
    translate: 24px 12px;
}