translate3d()

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2022 года.

Функция translate3d() CSS функция перемещает элемент в трехмерном пространстве. Результатом является тип данных <transform-function>.

Попробовать

Эта трансформация характеризуется трехмерным вектором [tx, ty, tz]. Его координаты определяют, насколько элемент перемещается в каждом направлении.

Синтаксис

translate3d(tx, ty, tz)

Значения

tx: Является <length> или <percentage>, представляющими абсциссу (горизонтальная, x-компонента) вектора перемещения [tx, ty, tz].
ty: Является <length> или <percentage>, представляющими ординату (вертикальная, y-компонента) вектора перемещения [tx, ty, tz].
tz: Является <length>, представляющей z-компоненту вектора перемещения. Она не может быть значением <percentage>; в этом случае свойство, содержащее преобразование, считается недействительным [tx, ty, tz].

Декартовы координаты на ℝ^2	Однородные координаты на ℝℙ^2	Декартовы координаты на ℝ^3	Однородные координаты на ℝℙ^3
Это преобразование применяется к трехмерному пространству и не может быть представлено на плоскости.		Перемещение не является линейным преобразованием в ℝ^3 и не может быть представлено с помощью матрицы декартовых координат.	$\left( \begin{array}{cccc} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{array} \right)$

Примеры

Использование сдвигов по одной оси

HTML

<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

CSS

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

.moved {
  /* Equivalent to perspective(500px) translateX(10px) */
  transform: perspective(500px) translate3d(10px, 0, 0px);
  background-color: pink;
}

Результат

END_OF_DOCUMENT_MARKER

Комбинирование трансляции по оси z и оси x

HTML

<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

CSS

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

.moved {
  transform: perspective(500px) translate3d(10px, 0, 100px);
  background-color: pink;
}

Результат

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

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

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`translate3d`	12	12	10	15	4	18	10	14	3.2	1.0	3

См. также

© 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/transform-function/translate3d