rotate()

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

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

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

Синтаксис

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

rotate(a)

Значення

a

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

Декартові координати на ℝ^2 Однорідні координати на ℝℙ^2 Декартові координати на ℝ^3 Однорідні координати на ℝℙ^3
(cos ( a ) - sin ( a ) sin ( a ) cos ( a )) (cos ( a ) - sin ( a ) 0 sin ( a ) cos ( a ) 0 0 0 1) (cos ( a ) - sin ( a ) 0 sin ( a ) cos ( a ) 0 0 0 1) (cos ( a ) - sin ( a ) 0 0 sin ( a ) cos ( a ) 0 0 0 0 1 0 0 0 0 1)
[cos(a) sin(a) -sin(a) cos(a) 0 0]

Приклади

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

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);
}

Результат

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

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

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
rotate()
Chrome Full support 1
Edge Full support 12
Firefox Full support 3.5
Internet Explorer Full support 9
Opera Full support 10.5
Safari Full support 3.1
WebView Android Full support 2
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 11
Safari on iOS Full support 3.2
Samsung Internet Full support 1.0

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