Функция CSS `translateZ()`

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

Попробуйте

transform: translateZ(0);

transform: translateZ(42px);

transform: translateZ(-9.7rem);

transform: translateZ(-3ch);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

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

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

Синтаксис

translateZ(tz)

Значения

tz

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

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

Примеры

В этом примере создаются два блока. Первый расположен на странице обычным образом, без какого-либо переноса. Ко второму применяется перспектива, создающая трёхмерное пространство, после чего он перемещается в сторону пользователя.

HTML

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

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-дисплее элемент кажется больше, а при просмотре в VR-гарнитуре или на другом 3D-дисплее — ближе.

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

Результат

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

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

См. также

• transform
• <transform-function>
• translate