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

CSS function rotateZ()

Опис

rotateZ() - це функція в CSS, яка дозволяє обертати елемент навколо осі Z. Це означає, що елемент обертається в площині, що паралельна сторіні екрана. Використання цієї функції дозволяє надавати об'єктам тривимірний ефект та створювати захоплюючі анімації.

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

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

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

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

.box {
  transform: rotateZ(45deg);
}

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

Порада:

Функцію rotateZ() можна комбінувати з іншими CSS-функціями, такими як translate(), scale() або rotateX(), для створення складних ефектів обертання та трансформації.
Порада:

Враховуйте, що обертання за допомогою функції rotateZ() впливає на видимість та розташування елементів, зокрема на їхню ширину та висоту.
Порада:

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

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

Синтаксис

transform: rotateZ(<value>);
<deg>

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

<rad>

Значення кута можуть бути вказані в радіанах (rad)

<turn>

Значення кута можуть бути вказані в повних обертах (turn)

Переглядачі

Переглядач

12

10

4

15

12
Переглядач

3

18

10

3.2

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

Приклади


При наведенні курсору на блок, він повертається на 180 градусів навколо осі Z.

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

Спільнота

Зв'язок