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

CSS function rotate()

Опис

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

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

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

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

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

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

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

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

Порада:

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

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

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

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

Синтаксис

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

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

<rad>

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

<turn>

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

Переглядачі

Переглядач

1

3.5

3.1

10.5

12
Переглядач

2

18

4

3.2

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

Приклади


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

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

Документи

Зв'язок