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).

автор: Bond правити

Порада

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

автор: Bond правити

Нотатка

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

автор: Bond правити

Нотатка

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

Функція translate3d може отримувати єдине значення:

<length>

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	12	10	4	15	12

Підтримка: мобільні переглядачі

Переглядач
	3	18	10	3.2

Приклади

+ запропонувати свій приклад у пісочниці