css.in.ua
Підтримати

CSS function translateZ()

Опис

translateZ() - це функція CSS, яка використовується для зміщення елемента по осі Z (глибині) в тривимірному просторі. За допомогою цієї функції можна змінити положення елемента в третьому вимірі відносно його вихідної позиції.

Ця функція приймає один аргумент, який вказує величину зсуву по осі Z. Позитивне значення зсуває елемент вгору, а негативне - вниз. Значення можуть бути вказані в пікселях (px), відсотках (%), відносних одиницях (em, rem) або використовувати ключові слова.

Приклад використання:

Нехай у нас є наступний HTML-код:

<div class="box">Це елемент з тривимірним ефектом.</div>

Для зсуву елемента на 100 пікселів вгору в третьому вимірі, застосуємо наступний CSS:

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

Цей приклад зміщує елемент вгору відносно його вихідного положення на 100 пікселів у третьому вимірі.

Нотатка:

Значення може впливати на відображення елемента, якщо використовується перспектива (perspective) на його батьківському елементі.
Порада:

Функція translateZ() особливо корисна при роботі з тривимірною графікою або створенні ефектів перспективи. Вона дозволяє контролювати глибину елементів і створювати захоплюючі тривимірні ефекти на сторінці. Ви можете експериментувати з різними значеннями для отримання бажаного зсуву і створення унікальних дизайнів.

Синтаксис

transform: translateZ(value);
<length>

Величина зсуву в пікселях/відсотках/відносних одиницях

Переглядачі

Переглядач

12

10

4

15

12
Переглядач

3

18

10

3.2

Мобільних переглядачів ще не додано.

Приклади


Інтерактивний приклад з різними значеннями.

Приклад використання translateZ() для зсуву елемента по осі Z.

Спільнота

Зв'язок