Transform Rotate CSS: Как создать эффект вращения элементов на сайте

Transform rotate - это свойство CSS, которое позволяет повернуть элемент на заданный угол относительно центра.

Для использования этого свойства необходимо указать угол поворота в градусах, например:

.rotate {
  transform: rotate(45deg);
}

В этом примере элемент с классом «rotate» будет повернут на 45 градусов по часовой стрелке.

Также можно использовать отрицательные значения для вращения против часовой стрелки:

.rotate {
  transform: rotate(-45deg);
}

Свойство transform rotate также может быть комбинировано с другими свойствами трансформации для создания сложных эффектов, например:

.rotate {
  transform: rotate(45deg) scale(1.5);
}

В этом примере элемент будет повернут на 45 градусов и увеличен в размере на 50%.

Кроме того, можно использовать свойство transform-origin, чтобы задать точку поворота элемента. Например:

.rotate {
  transform: rotate(45deg);
  transform-origin: bottom right;
}

В этом примере элемент будет повернут на 45 градусов относительно правого нижнего угла.

Таким образом, свойство transform rotate - это отличный способ добавить динамики и интересных эффектов к элементам на веб-странице.