Как использовать CSS свойство rotate для поворота элементов на странице?

Чтобы использовать CSS-свойство rotate для поворота элементов на странице, нужно указать угол поворота в единицах измерения углов. doka.guide Например, чтобы повернуть элемент на 30 градусов вправо, нужно написать: div { rotate: 30deg; }. doka.guide

Есть несколько вариантов использования:

• Одно значение. doka.guide Элемент будет вращаться вдоль оси z. doka.guide Пример: .element { rotate: 90deg; }. doka.guide
• Уточнение по оси. doka.guide Можно указать, по какой из трёх осей (x, y, z) применится значение. doka.guide Пример: .element { rotate: x 90deg; }. doka.guide
• Собственный вектор и угол вращения. doka.guide Нужно указать три числа и угол вращения. doka.guide Каждое из трёх чисел отвечает за соответствующую ось (x, y, z). doka.guide 0 значит, что вращения по этой оси не будет. doka.guide Всё, что больше нуля, устанавливает точку на этой оси. doka.guide В итоге элемент будет повёрнут вокруг точки на пересечении всех трёх осей. doka.guide Пример: .element { rotate: 0 0 1 45deg; }. doka.guide

По умолчанию rotate вращает элемент вокруг его центра, но точку вращения можно изменить с помощью свойства transform-origin. learnjs.ru