тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Функция rotate

Функция rotate() задает поворот элемента на заданный угол. Используется совместно со свойством transform. Значением свойства служит угол в любых единицах для углов. Положительное значение поворачивает по часовой стрелке, отрицательное - против. Поворот осуществляется вокруг точки, задаваемой свойством transform-origin.

Синтаксис

селектор { transform: rotate(угол); }

Пример

В данном примере блок повернут на 30 градусов по часовой стрелке:

<div id="elem">lorem ipsum</div> #elem { transform: rotate(30deg); border: 1px solid black; width: 100px; height: 50px; }

:

Пример

В данном примере блок повернут на 30 градусов против часовой стрелки:

<div id="elem">lorem ipsum</div> #elem { transform: rotate(-30deg); border: 1px solid black; width: 100px; height: 50px; }

:

Пример

В данном примере блок по наведению повернется на 1 оборот, так как значение поворота задано в 1turn (такого же эффекта можно добиться, если задать угол поворота в 360deg). Для плавности поворота добавлено свойство transition:

<div id="elem">lorem ipsum</div> #elem { border: 3px solid black; width: 100px; height: 50px; transition: transform 3s linear; } #elem:hover { transform: rotate(1turn); }

:

Смотрите также

  • функцию rotateX,
    которая задает поворот по оси X
  • функцию rotateY,
    которая задает поворот по оси Y
  • функцию rotateZ,
    которая задает поворот по оси Z
  • функцию rotate3d,
    которая задает поворот по трем осям