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

CSS function rotate3d()

Опис

rotate3d() - ця функція в CSS дозволяє обертати елемент у тривимірному просторі навколо вектора, визначеного параметрами x, y і z. Вона приймає чотири параметри, де перші три - компоненти вектора обертання (x, y, z), а четвертий параметр - кут обертання елемента. За замовчуванням, якщо всі параметри задані як 0, функція повертає відсутність обертання елемента.

Ця функція дозволяє контролювати тривимірний обертання елемента, і ви можете задати величину обертання для кожної з осей x, y і z. Ви можете вказати значення параметрів x, y і z як числа або відсотки, а кут обертання може бути вказаний в градусах (deg), радіанах (rad) або повних обертах (turn). Позитивні значення кута обертання здійснюють обертання за годинниковою стрілкою, а від'ємні - проти годинникової стрілки.

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

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

<div class="box">Це елемент, який потрібно обернути.</div>

Щоб обернути елемент на 45 градусів навколо осі X у тривимірному просторі, застосуйте такий CSS:

.box {
  transform: rotate3d(1, 0, 0, 45deg);
}

Цей код здійснює обертання елемента навколо осі X на 45 градусів.

Порада:

Використовуйте функцію rotate3d() для створення складних трансформацій обертання елементів у тривимірному просторі.
Порада:

Користуйтесь режимом прозорості (opacity) або перекриття (z-index) для управління видимістю та позиціонуванням обернених елементів.
Порада:

Звертайте увагу на використання координат x, y, z для досягнення потрібної орієнтації та ефектів обертання у тривимірному просторі.
Порада:

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

Синтаксис

transform: rotate3d( <number> , <number> , <number> , <angle> );
<number>

Значення, яке описує координати X/Y/Z вектора, що позначає вісь обертання.

<angle>

Значення кута може бути вказане в градусах (deg), радіанах (rad), повних обертах (turn).

Переглядачі

Переглядач

12

10

4

15

12
Переглядач

3

18

10

3.2

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

Приклади


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

Блок повертається на 45 градусів за годинниковою стрілкою у тривимірному просторі.

Спільнота

Зв'язок