Представьте, что ваш сайт перестал быть плоским — стал пространством, где элементы действительно приближаются к пользователю или удаляются от него. Именно это и делает CSS-функция translateZ(). Она перемещает элемент по оси Z в 3D-окружении, делая его визуально ближе или дальше без изменения фактического размера.

Как на самом деле работает translateZ()

На стандартном 2D-экране браузеры отображают только высоту и ширину — глубины нет. Поэтому translateZ() сама по себе не даёт видимого эффекта. Нужно добавить перспективу — либо через свойство perspective на родительском элементе, либо через функцию perspective() непосредственно на самом элементе. Без этого элемент остаётся плоским.

.box:hover {
  transform: translateZ(100px);
}

.box.perspective:hover {
  transform: perspective(500px) translateZ(100px);
}

Во втором примере при наведении блок смещается на 100px ближе — визуально он кажется больше, но на самом деле изменилось только расстояние. Это не то же самое, что масштабирование. scale() изменяет размер элемента; translateZ() перемещает его в 3D-пространстве.

Синтаксис и аргументы

Функция принимает один аргумент — значение длины — и используется со свойством transform:

  • Положительные значения (например, 100px, 5rem) приближают элемент к пользователю.
  • Отрицательные значения (например, -50px, -8em) отдаляют его.

Это описано в спецификации CSS Transform Module Level 2.

Оживляем глубину: перспектива и preserve-3d

Чтобы увидеть эффект, нужен 3D-контекст. Начните с контейнера-сцены:

<div class="scene">
  <div class="parent">
    <div class="box">translateZ(100px)</div>
  </div>
</div>

Примените перспективу к сцене и transform-style: preserve-3d к родительскому элементу. Затем переместите блок:

.scene {
  perspective: 800px;
}
.parent {
  transform-style: preserve-3d;
}
.box {
  transform: translateZ(100px);
}

Если повернуть родительский элемент, вы увидите, что блок не увеличился — он просто расположен ближе к вам, чем его родитель.

Свойство perspective vs функция perspective()

Оба варианта задают проекцию, но работают по-разному:

  • Свойство (perspective: 800px) устанавливается на родителе и применяется ко всем 3D-дочерним элементам.
  • Функция (perspective(800px)) применяется напрямую к одному элементу и обязательно должна идти перед 3D-трансформацией в значении свойства.
/* Работает */
.element {
  transform: perspective(800px) translateZ(100px);
}

/* Не сработает — порядок важен */
.element {
  transform: translateZ(100px) perspective(800px);
}

Прирост производительности? Да, и серьёзный

Вот практическое преимущество: translateZ(0) переключает рендеринг с CPU на GPU. Этот трюк предотвращает мерцание при анимациях и делает переходы более плавными — особенно полезно для интерактивных элементов на бизнес-сайтах, таких как выпадающие меню или модальные окна.

Если вы создаёте многоязычный сайт (EN/RU/EL) для клиентов на Кипре или в ЕС, плавная производительность имеет значение. Глючное меню на странице оформления заказа в интернет-магазине может стоить конверсий.

Поддержка браузерами

Все современные браузеры поддерживают translateZ() — никаких полифиллов не требуется. Тем не менее, всегда тестируйте на старых устройствах, если ваша аудитория их использует.

Практические выводы для вашего следующего проекта

  • Используйте translateZ() для тонких эффектов при наведении на кнопки CTA или карточки товаров — это добавляет глубину без резких анимаций.
  • Комбинируйте с perspective и preserve-3d для создания иммерсивных галерей или интерактивных дашбордов.
  • Не используйте её как замену scale() — эти функции решают разные задачи.
  • Для сайтов, соответствующих GDPR (распространено в ЕС), делайте анимации доступными: используйте prefers-reduced-motion в качестве запасного варианта.