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 градусів.
- Порада
-
Використовуйте функцію
автор: Bondrotate3d()для створення складних трансформацій обертання елементів у тривимірному просторі. - Порада
-
Користуйтесь режимом прозорості (
автор: Bondopacity) або перекриття (z-index) для управління видимістю та позиціонуванням обернених елементів. - Порада
-
Звертайте увагу на використання координат
автор: Bondx,y,zдля досягнення потрібної орієнтації та ефектів обертання у тривимірному просторі. - Порада
-
Функція
автор: Bondrotate3d()дозволяє створювати захоплюючі тривимірні ефекти на вашому веб-сайті і додає реалістичність до об'єктів на сторінці. Вона дозволяє керувати обертанням елементів у трьох вимірах і створювати вражаючі анімації та перетворення для поліпшення користувацького досвіду.
Синтаксис
transform: rotate3d( <number> , <number> , <number> , <angle> );Функція rotate3d може отримувати 2 значень:
-
<number> -
Значення, яке описує координати
автор: BondX/Y/Zвектора, що позначає вісь обертання. -
<angle> -
Значення кута може бути вказане в градусах (
автор: Bonddeg), радіанах (rad), повних обертах (turn).
| Значення без задання: | (0, 0, 0, 0deg) |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 12 | 10 | 4 | 15 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 3 | 18 | 10 | 3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
При наведенні курсору на блок, він повертається на 180 градусів за годинниковою стрілкою у тривимірному просторі за допомогою функції rotate3d().
Блок повертається на 45 градусів за годинниковою стрілкою у тривимірному просторі.
Коментарі
Коментарів ще немає — будьте першим!