LearnJS

rotate()

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() c другими функциями

Для создания более сложных визуальных эффектов можно сочетать rotate() в одной строке с другими функциями преобразования, такими как translate(), scale() и skew().

  transform: rotate(90deg) skew(30deg) scale(1.5) translate(10px, 5px);

При работе с несколькими трансформациями стоит учитывать порядок, в котором они применяются. Разные последовательности могут давать разные визуальные эффекты.