​Как повернуть элементы на странице просто и быстро?

Свойство rotate используют, когда нужно повернуть элемент. Раньше для поворота нужно было использовать свойство transform со значением rotate, что не всегда было удобно. Теперь для этого есть отдельное свойство.

Поворачиваем элемент на 30 градусов вправо:

div {
  rotate: 30deg;
}

Угол поворота должен указываться в единицах измерения углов.
Если указано одно значение, то элемент будет вращаться вдоль оси z

К значению величины поворота можно добавить уточнение, по какой из трёх осей (x, y, z) применится значение. Эквивалентно rotateX(), rotateY(), rotateZ():

.element {
  rotate: x 90deg;
}

В таком формате можно указать угол наклона только по одной из осей. Не получится задать второе значение в этом же свойстве или ниже.

Можно указать собственный вектор и угол вращения в формате: 3 числа + угол. Аналогично функции rotate3d().

.element {
  rotate: 0 0 1 45deg;
}

Каждое из трёх чисел отвечает за соответсвующую ось (x, y, z). 0 значит, что вращения по этой оси не будет. Всё, что больше нуля, устанавливает точку на этой оси.
В итоге элемент будет повярнут вокруг точки на пересечении всех трёх осей.

👉 @frontendInterview