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

CSS function translate3d()

Опис

translate3d() - це функція CSS, яка використовується для зміщення елементів в тривимірному просторі. Вона є розширеною версією функції translate() та дозволяє здійснювати переміщення по осях X, Y і Z відносно початкового положення елемента.

Загальний синтаксис функції виглядає наступним чином:

translate3d(<зміщення_X>, <зміщення_Y>, <зміщення_Z>)
  • <зміщення_X> - значення зміщення по осі X.
  • <зміщення_Y> - значення зміщення по осі Y.
  • <зміщення_Z> - значення зміщення по осі Z.

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

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

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

<div class="box">Це елемент зі стилізованим виглядом.</div>

Для цього прикладу, давайте використаємо translate3d() для зсуву нашого елемента вправо на 20px, вниз на 10px і вперед по осі Z на 5px:

.box {
  transform: translate3d(20px, 10px, 5px);
}

Цей приклад зсуне наш елемент на зазначені значення відносно його початкового положення.

Порада:

Функцію translate3d() можна використовувати разом з іншими властивостями CSS, такими як трансформації (transform), переходи (transition) або анімації (animation).
Нотатка:

При використанні функції translate3d() для зміщення елементів по осі Z, впевніться, що ви використовуєте 3D-перспективу (perspective) для створення ефекту глибини.
Нотатка:

Зверніть увагу, що функція translate3d() працює лише з елементами, які мають властивість position встановлену на значення, відмінне від static.
Порада:

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

Синтаксис

translate3d() = translate3d( <translation-value> , <translation-value> , <length> )
<length>

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

Переглядачі

Переглядач

12

10

4

15

12
Переглядач

3

18

10

3.2

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

Приклади


При наведенні курсору на блок, він зсувається на -100px по осі Z за допомогою функції translate3d().

Блок зсувається на 40 пікселів вниз по осі Y.

Документи

Зв'язок