CSS rotate — обертання елемента окремою властивістю

CSS властивість rotate обертає елемент окремою властивістю, без transform.

правити

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

Раніше всі перетворення жили в одному рядку: transform: translate(10px) rotate(45deg) scale(1.2). І це створювало вічну проблему — щоб змінити лише поворот, доводилось переписувати весь рядок разом із рештою перетворень.

Тепер rotate, scale і translate — самостійні властивості. Кожну можна анімувати окремо, і вони не затирають одна одну.

Порядок застосування фіксований: спершу translate, потім rotate, потім scale.

правити

Порада

Якщо анімуєш поворот і масштаб окремо (наприклад, поворот на hover, а масштаб на active) — бери саме ці властивості, а не transform: вони не конфліктуватимуть.

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

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

Синтаксис

rotate: none | <angle> | [ x | y | z | <number>{3} ] <angle>;

Властивість rotate може отримувати 3 значень:

none

Без обертання.

автор: NagarD

правити

angle

Кут обертання навколо осі Z: 45deg, 0.5turn…

автор: NagarD

правити

axis angle

Вісь (x, y, z або вектор) і кут: y 60deg.

автор: NagarD

правити

Переглядачі

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

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

Переглядач
	104	72	14.1	90	104	—

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

Переглядач
	104	104	79	14.5

Приклади

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

<div class="box">Наведи</div>

.box {
    width: 100px;
    height: 100px;
    background: #0172ad;
    rotate: 0deg;
    scale: 1;
    transition: rotate .3s, scale .3s;
}

.box:hover {
    rotate: 15deg;
    scale: 1.1;
}