rotate() в CSS - это функция свойства transform, которая позволяет вращать элементы в 2D плоскости на указанный угол.
transform: rotate(45deg);
Сразу же посмотрим, какой может быть результат анимации.
Задавая положительное число в скобках в rotate(), мы тем самым поворачиваем элемент по часовой стрелке, если отрицательное, тогда против часовой.
transform: rotate(-45deg);
Для того, чтобы задать угол вращения в rotate() можно использовать следующие единицы измерения.
deg (градусы) - один полный оборот элемента вокруг оси будет равняться 360deg. Градусы интуитивно понятны, позволяют точно указать угол и вследствие этого более распространены.rad (радианы) — единица измерения угла, соответствующая дуге, длина которой равна её радиусу. Полный оборот соответствует 2π (360 градусов) или примерно 6.28318rad, соответственно 1π (180 градусов) это 3.14159rad. Радианы удобны при работе с тригонометрическими функциями и могут понадобиться при интеграции с некоторыми библиотеками.grad (градианы) - грады используются редко, здесь полной оборот (360 градусов) равен 400grad.turn (обороты) - один оборот равен 360 градусам, соответственно 0.5turn эквивалентно 180deg.По умолчанию rotate() вращает элемент вокруг его центра, но точку вращения можно изменить, воспользовавшись свойством transform-origin.
В данном примере точка устанавливается в верхнем левом углу:
transform-origin: left top;
Здесь в нижнем правом:
transform-origin: bottom right;
Также существуют и другие значения свойства transform-origin, которые дают возможность задать различные точки вращения.
rotate() вращает элемент вокруг оси Z, однако для реализаций 3D-анимаций есть функции позволяющие вращать объекты по оси X и Y.
transform: rotateX(90deg);
transform: rotateY(90deg);
Также есть функция rotateZ(), которая эквивалента rotate() и чаще используется в 3D анимации, для лучшей читаемости кода, так как явно указывает на ось вращения.
Для создания более сложных визуальных эффектов можно сочетать rotate() в одной строке с другими функциями преобразования, такими как translate(), scale() и skew().
transform: rotate(90deg) skew(30deg) scale(1.5) translate(10px, 5px);
При работе с несколькими трансформациями стоит учитывать порядок, в котором они применяются. Разные последовательности могут давать разные визуальные эффекты.