Урок 66 із 104
63%
← Назад

Поворот элемента в CSS

Вивчаємо функцію rotate(), яка дозволяє повертати HTML-елементи навколо своєї точки трансформації.

Що таке rotate()

Функція rotate() використовується разом із властивістю transform і повертає елемент на заданий кут.

Кут можна задавати в градусах (deg). Додатне значення повертає елемент за годинниковою стрілкою, а від'ємне — проти годинникової стрілки.

  • rotate(45deg) — поворот на 45 градусів за годинниковою стрілкою.
  • rotate(-45deg) — поворот на 45 градусів проти годинникової стрілки.
  • rotate(90deg) — поворот на 90 градусів.
  • rotate(180deg) — поворот на 180 градусів.

Синтаксис

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

Поворот проти годинникової стрілки

.element { transform: rotate(-30deg); }

Поворот при наведенні

.element { transition: transform 0.3s ease; } .element:hover { transform: rotate(10deg); }
❗ Важливо:

Функція rotate() сама по собі не створює плавного переходу. Для плавного повороту зазвичай використовують transition разом із transform.

Практичне завдання

Практичне завдання 1

📌 Завдання:
  1. Створіть блок розміром 100px на 100px.
  2. Поверніть його на 45 градусів за допомогою rotate().
<!-- Початковий код --> <div class="box"></div> <style> .box { width: 100px; height: 100px; background-color: steelblue; } </style>
💡 Показати підказку

Використайте властивість transform та функцію rotate(45deg).

✅ Показати відповідь
.box { width: 100px; height: 100px; background-color: steelblue; transform: rotate(45deg); }

Практичне завдання 2

📌 Завдання:
  1. Зробіть так, щоб блок при наведенні повертався на 90 градусів.
  2. Додайте плавність повороту.
<!-- Початковий код --> <div class="box"></div> <style> .box { width: 100px; height: 100px; background-color: tomato; } </style>
💡 Показати підказку

Для плавності використайте transition: transform 0.5s ease, а поворот задайте через transform: rotate(90deg) у стані :hover.

✅ Показати відповідь
.box { width: 100px; height: 100px; background-color: tomato; transition: transform 0.5s ease; } .box:hover { transform: rotate(90deg); }

Практичне завдання 3

📌 Завдання:
  1. Створіть кнопку.
  2. При наведенні зробіть її поворот на -10 градусів.
  3. Поворот повинен бути плавним.
<!-- Початковий код --> <button class="button">Навести курсор</button> <style> .button { padding: 10px 20px; border: none; background-color: royalblue; color: white; cursor: pointer; } </style>
💡 Показати підказку

Використайте transition для плавності та rotate(-10deg) у :hover.

✅ Показати відповідь
.button { padding: 10px 20px; border: none; background-color: royalblue; color: white; cursor: pointer; transition: transform 0.3s ease; } .button:hover { transform: rotate(-10deg); }