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 і не може бути представлене за допомогою матриці Декартових координат.	$\left( \begin{array}{ccc} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{array} \right)$	$\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]`

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

none | <length-percentage> [ <length-percentage> <length>? ]?де 
<length-percentage> = <length> | <percentage>

Приклади

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

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;
}

Результат

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

Специфікація
CSS Transforms Module Level 1 (CSS Transforms 1) # funcdef-transform-translate

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

	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

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

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.