rotate()

Функція CSS rotate() (обертати) визначає перетворення, котре обертає елемент навколо фіксованої точки на площині, не деформуючи цей елемент. Її результат належить до типу даних <transform-function>.

Спробуйте його в дії

Фіксована точка, навколо котрої обертається елемент, також відома як центр перетворення. Усталено вона розташована в центрі елемента, а власний центр перетворення можна задати за допомогою властивості transform-origin.

Синтаксис

Величина обертання, спричиненого rotate(), задається у вигляді кута. Якщо кут додатний, то обертання відбувається за годинниковою стрілкою, а якщо від'ємний, то проти. Обертання на 180° зветься центральною симетрією.

rotate(a)

Значення

a

Значення <angle>, що представляє кут обертання. Напрям обертання залежить від напряму письма. В контексті письма зліва направо додатний кут позначає обертання за годинниковою стрілкою, а від'ємний – проти. В контексті письма справа наліво додатний кут позначає обертання проти годинникової стрілки, а від'ємний – за.

Формальний синтаксис

none | <angle> | [ x | y | z | <number>{3} ] && <angle>

Приклади

Найпростіший приклад

HTML

<div>Звичайний</div>
<div class="rotated">Обернений</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /* Рівносильно rotateZ(45deg) */
  background-color: pink;
}

Результат

Поєднання обертання з іншим перетворенням

Коли хочеться застосувати до елемента декілька перетворень, слід поводитись обережно з порядком задання таких перетворень. Наприклад, якщо перед перенесенням обернути елемент, то перенесення відбудеться вздовж нової осі обертання!

HTML

<div>Normal</div>
<div class="rotate">Обернений</div>
<div class="rotate-translate">Обернений + Перенесений</div>
<div class="translate-rotate">Перенесений + Обернений</div>

CSS

div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}

.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}

Результат

Специфікації

Сумісність із браузерами

Дивіться також

• Властивість transform
• Властивість rotate
• <transform-function>
• rotate3d()