CSS rotate3d() — поворот навколо довільної осі
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Використовуйте функцію
автор: 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 |
Приклади
+ запропонувати свій приклад у пісочниці
Блок повертається на 45 градусів за годинниковою стрілкою у тривимірному просторі.
HTML
<div id="description">
<p>Блок повертається на 45 градусів за годинниковою стрілкою у тривимірному просторі за допомогою функції rotate3d(). Обидва блоки використовують однакові розміри для порівняння.</p>
</div>
<div class="container">
<div class="block"></div>
<div class="comparison-block"></div>
</div>CSS
#description {
font-style: italic;
text-align: center;
line-height: 1.5;
margin-bottom: 50px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
.container {
height: 200px;
background-color: #F2F2F2;
display: flex;
justify-content: space-around;
align-items: center;
}
.block {
width: 80px;
height: 80px;
background-color: #FFC107;
transform: rotate3d(1, 1, 0, 45deg);
}
.comparison-block {
width: 80px;
height: 80px;
background-color: #FF0000;
}При наведенні курсору на блок, він повертається на 180 градусів за годинниковою стрілкою у тривимірному просторі за допомогою функції rotate3d().
HTML
<div id="description">
<p>При наведенні курсору на блок, він повертається на 180 градусів за годинниковою стрілкою у тривимірному просторі за допомогою функції rotate3d().</p>
</div>
<div class="container">
<div class="block"></div>
</div>CSS
#description {
font-style: italic;
text-align: center;
line-height: 1.5;
margin-bottom: 50px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
.container {
height: 200px;
background-color: #F2F2F2;
position: relative;
}
.block {
width: 100px;
height: 100px;
background-color: #FFC107;
position: absolute;
top: 50%;
left: 50%;
transform: rotate3d(0, 0, 0, 0deg);
transition: transform 0.3s ease;
}
.container:hover .block {
transform: rotate3d(1, 1, 0, 180deg);
}Дві однакові картки з тим самим rotate3d(1, 1, 0, 55deg). Ліва стоїть у контейнері без перспективи — поворот схожий на плоске стиснення. Права має на батьку perspective: 500px, і той самий поворот стає об'ємним. Третя картка показує, що нульовий вектор не обертає взагалі.
HTML
<div id="description">
<h2>rotate3d(): усе вирішує перспектива</h2>
<p>Той самий поворот у трьох умовах. Різниця не в куті, а в наявності perspective на батьківському елементі.</p>
</div>
<div id="result">
<figure>
<div class="stage flat"><div class="card">без perspective</div></div>
<figcaption>rotate3d(1, 1, 0, 55deg)</figcaption>
</figure>
<figure>
<div class="stage deep"><div class="card">з perspective</div></div>
<figcaption>perspective: 500px на батьку</figcaption>
</figure>
<figure>
<div class="stage deep"><div class="card zero">нульовий вектор</div></div>
<figcaption>rotate3d(0, 0, 0, 55deg)</figcaption>
</figure>
</div>CSS
#result {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
figure {
margin: 0;
font: 13px/1.4 system-ui, sans-serif;
text-align: center;
}
figcaption {
margin-top: 8px;
color: #495057;
}
.stage {
width: 170px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f3f5;
border: 1px dashed #ced4da;
}
/* Уся різниця між першим і другим блоком — цей один рядок */
.deep {
perspective: 500px;
}
.card {
width: 120px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
border-radius: 8px;
background: #1864ab;
color: #fff;
transform: rotate3d(1, 1, 0, 55deg);
}
.zero {
background: #868e96;
transform: rotate3d(0, 0, 0, 55deg);
}Коментарі
Коментарів ще немає — будьте першим!