CSS rotate() — поворот елемента

Опис

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

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

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

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

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

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

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

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

правити

Загальний опис

правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Нотатка

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

transform: rotate(<value>);

Функція rotate може отримувати 3 значень:

<deg>

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

автор: Bond

правити

<rad>

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

автор: Bond

правити

<turn>

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	3.5	3.1	10.5	12

Підтримка: мобільні переглядачі

Переглядач
	2	18	4	3.2

Приклади

+ запропонувати свій приклад у пісочниці

<div id="description">
  <p>Блок повертається на 45 градусів за годинниковою стрілкою за допомогою функції rotate(). Обидва блоки використовують однакові розміри та колір для порівняння.</p>
</div>

<div class="container">
  <div class="block"></div>
  <div class="comparison-block"></div>
</div>

#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: rotate(45deg);
}

.comparison-block {
  width: 80px;
  height: 80px;
  background-color: #FF0000;
}

<div id="description">
  <p>При наведенні курсору на блок, він повертається на 180 градусів за годинниковою стрілкою за допомогою функції rotate().</p>
</div>

<div class="container">
  <div class="block"></div>
</div>

#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: rotate(0deg);
  transition: transform 0.3s ease;
}

.container:hover .block {
  transform: rotate(180deg);
}

<div id="description">
  <h2>Порядок функцій у transform</h2>
  <p>rotate(45deg) translateX(80px) — зсув іде вже вздовж поверненої осі. translateX(80px) rotate(45deg) — спершу вбік, потім поворот на місці.</p>
</div>

<div id="result">
  <div class="stage">
    <div class="ghost"></div>
    <div class="box one">1</div>
    <p class="label">rotate() → translateX()</p>
  </div>

  <div class="stage">
    <div class="ghost"></div>
    <div class="box two">2</div>
    <p class="label">translateX() → rotate()</p>
  </div>
</div>

#description {
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 30px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

#result {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.stage {
  position: relative;
  width: 260px;
  height: 200px;
  background: #f2f2f2;
  border: 1px dashed #999;
}

.label {
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  margin: 0;
  font: 13px/1.4 monospace;
  text-align: center;
  color: #555;
}

.ghost,
.box {
  position: absolute;
  top: 40px;
  left: 30px;
  width: 70px;
  height: 70px;
  box-sizing: border-box;
}

.ghost {
  border: 2px dashed #bbb;
}

.box {
  background: #2f6fed;
  color: #fff;
  font: bold 20px/70px Arial, sans-serif;
  text-align: center;
}

.one {
  transform: rotate(45deg) translateX(80px);
}

.two {
  transform: translateX(80px) rotate(45deg);
}