rotate

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

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

        
          
          div {  rotate: 30deg;}
          div {
  rotate: 30deg;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Угол поворота должен указываться в единицах измерения углов.

Если указано одно значение, то элемент будет вращаться вдоль оси z:

        
          
          .element {  rotate: 90deg;}
          .element {
  rotate: 90deg;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

        
          
          .element {  rotate: x 90deg;}
          .element {
  rotate: x 90deg;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Помните, что все оси по умолчанию выходят из верхнего левого угла элемента. Это можно изменить при помощи transform-origin.

Отдельное свойство rotate пришло на замену функции rotate(). Не смотря на то, что свойство transform с его функциями очень мощное, часто бывало, что нужно переписывать весь трансформ со всеми его значениями, чтобы изменить только один параметр. Теперь для несложных поворотов можно использовать rotate. Также не нужно запоминать порядок позиционирования функции, в отличие от transform.

rotate поддерживает переходы и анимацию CSS, которые можно делать с помощью :hover и @keyframes.