translate()

Функція CSS translate() (перекласти) змінює положення елемента по горизонталі чи по вертикалі. Її результат має тип даних <transform-function>.

Спробуйте його в дії

Таке перетворення характеризується двовимірним вектором [tx, ty]. Його координати визначають те, наскільки елемент пересувається за кожною з осей координат.

Синтаксис

/* Одинарне значення <length-percentage> */
transform: translate(200px);
transform: translate(50%);

/* Подвійне значення <length-percentage> */
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);

Значення

Одинарне значення <length-percentage>

Таке значення – <length> чи <percentage>, що представляє координату за віссю абсцис (по горизонталі, компонента X) вектора перекладу. Ордината (значення по вертикалі, компонента Y) вектора перекладу вважатиметься 0. Наприклад, translate(2px) рівносильно translate(2px, 0). Відсоткове значення береться від ширини референтної рамки, визначеної властивістю transform-box.

Подвійне значення <length-percentage>

Таке значення описує два значення <length> чи <percentage>, що представляють і абсцису (по горизонталі, компонента X), і ординату (по вертикалі, компонента Y) вектора перекладу [tx, ty]. Відсоткове значення на першій позиції береться від ширини, а на другій – від висоти референтної рамки, визначеної властивістю transform-box.

Декартові координати на ℝ^2 Однорідні координати на ℝℙ^2 Декартові координати на ℝ^3 Однорідні координати на ℝℙ^3

Переклад не є лінійним перетворенням у ℝ^2 і не може бути представлене за допомогою матриці Декартових координат.

(10tx01ty001)\left( \begin{array}{ccc} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{array} \right) (10tx01ty001)\left( \begin{array}{ccc} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{array} \right) (100tx010ty00100001)\left( \begin{array}{cccc} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)
[1 0 0 1 tx ty]

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

translate(<a href="/uk/docs/Web/CSS/length-percentage"><code>&lt;length-percentage&gt;</code></a>, <a href="/uk/docs/Web/CSS/length-percentage"><code>&lt;length-percentage&gt;</code></a>?)

Приклади

Використання одновісного перекладу

HTML

<div>Статичний</div>
<div class="moved">Переміщений</div>
<div>Статичний</div>

CSS

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /* Рівносильно: translateX(10px) і translate(10px, 0) */
  transform: translate(10px);
  background-color: pink;
}

Результат

Поєднання перекладу за осями X та Y

HTML

<div>Статичний</div>
<div class="moved">Переміщений</div>
<div>Статичний</div>

CSS

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}

Результат

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

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
translate()
Chrome Full support 1
Edge Full support 12
Firefox Full support 3.5
Internet Explorer Full support 9
Opera Full support 10.5
Safari Full support 3.1
WebView Android Full support 2
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 11
Safari on iOS Full support 3.2
Samsung Internet Full support 1.0

Дивіться також