translateZ()

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

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

Функция translateZ() CSS функция перемещает элемент вдоль оси z в 3D-пространстве, т.е. ближе или дальше от зрителя. Её результатом является тип данных <transform-function>.

Попробовать

Это преобразование определяется <length>, который определяет, насколько далеко внутрь или наружу перемещается элемент или элементы.

В приведенных выше интерактивных примерах, perspective: 550px; (для создания 3D-пространства) и transform-style: preserve-3d; (чтобы дочерние элементы, 6 граней куба, также были размещены в 3D-пространстве), были установлены для куба.

Примечание: translateZ(tz) эквивалентно translate3d(0, 0, tz).

Синтаксис

translateZ(tz)

Значения

tz: <length>, представляющий z-компоненту вектора смещения [0, 0, tz]. В системе декартовых координат он представляет сдвиг по оси z. Положительное значение перемещает элемент к зрителю, а отрицательное — дальше от него.

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

Примеры

В этом примере созданы два блока. Один расположен стандартно на странице, без каких-либо перемещений. Второй изменён путём применения перспективы для создания 3D-пространства, а затем перемещён к зрителю.

HTML

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

END_OF_DOCUMENT_MARKER

CSS

div {
  position: relative;
  width: 60px;
  height: 60px;
  left: 100px;
  background-color: skyblue;
}

.moved {
  transform: perspective(500px) translateZ(200px);
  background-color: pink;
}

Здесь действительно важен класс "moved"; давайте посмотрим, что он делает. Во-первых, функция perspective() позиционирует зрителя относительно плоскости, где z=0 (по сути, поверхности экрана). Значение 500px означает, что пользователь находится на 500 пикселей "перед" изображением, расположенным в z=0.

Затем, функция translateZ() перемещает элемент на 200 пикселей "наружу" от экрана, в сторону пользователя. Это приводит к тому, что элемент кажется больше при просмотре на 2D-дисплее или ближе при просмотре с помощью гарнитуры виртуальной реальности или другого 3D-дисплейного устройства.

Обратите внимание, что если значение perspective() меньше значения translateZ(), например, transform: perspective(200px) translateZ(300px);, преобразованный элемент не будет виден, так как он находится дальше от области просмотра пользователя. Чем меньше разница между значениями перспективы и translateZ, тем ближе пользователь к элементу и тем больше будет казаться преобразованный элемент.

Примечание: Так как композиция преобразований не коммутативна, порядок записи различных функций важен. В частности, в общем случае вы хотите, чтобы perspective() было расположено перед translateZ().

Результат

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

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

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`translateZ`	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/translateZ