Рекомендуемый курс:

Функция CSS rotate()

Определение и использование rotate() В CSS

rotate() Функция определяет 2D-поворот элемента. transform Используется в свойстве.

Пример

Пример 1

Использование rotate() Поворот нескольких элементов <div>:

#myDiv1 {
  transform: rotate(25deg);
}
#myDiv2 {
  transform: rotate(45deg);
}
#myDiv3 {
  transform: rotate(-45deg);
}

Попробуйте сами

Пример 2

Использование rotate() Поворот изображения:

#img1 {
  transform: rotate(90deg);
}
#img2 {
  transform: rotate(45deg);
}
#img3 {
  transform: rotate(-45deg);
}

Попробуйте сами

Грамматика CSS

rotate(angle)
Значение Описание
angle

Обязателен. Укажите угол поворота. Возможные единицы:

  • deg (градусы)
  • rad (радианы)
  • turn (круг)

Технические детали

Версия: CSS Transforms Module Level 1

Поддержка браузерами

Числа в таблице показывают версию первого браузера, который полностью поддерживает эту функцию.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Соответствующие страницы

Учебник:2D-трансформации CSS

См. также:Свойство transform в CSS

См. также:Свойство rotate в CSS

См. также:Функция rotate3d() в CSS

См. также:Функция CSS rotateX()

См. также:Функция rotateY() в CSS

См. также:Функция rotateZ() в CSS