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

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

Приклади

Приклад 1
Приклад 2

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


  See the Pen <a href="https://codepen.io/BonD007-the-flexboxer/pen/VwVZEKN">
  translateZ() 2</a> by BonD007 (<a href="https://codepen.io/BonD007-the-flexboxer">@BonD007-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.

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


  See the Pen <a href="https://codepen.io/BonD007-the-flexboxer/pen/abQoRdK">
  translateZ()</a> by BonD007 (<a href="https://codepen.io/BonD007-the-flexboxer">@BonD007-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.

CSS довідник

CSS функції

CSS function translateZ()

Опис

Синтаксис

Переглядачі

Приклади