Свойство CSS rotate

  • Предыдущая страница Справа
  • Следующая страница row-gap

Определение и использование

rotate Атрибут позволяет вращать элемент.

rotate Атрибут определяет значение, которое показывает степень вращения элемента вокруг оси z по часовой стрелке. Чтобы повернуть элемент вокруг оси x, y или другим способом, необходимо сделать соответствующие настройки.

rotate Значение атрибута может быть углом, именем оси + углом или тремя значениями + углом.

  • Если указан только угол, элемент будет вращаться вокруг оси z по часовой стрелке.
  • Если указан имя оси + угол, элемент будет вращаться вокруг указанной оси по часовой стрелке.
  • Если указаны три значения + угол, эти три значения определяют вектор, вокруг которого элемент будет вращаться.

Чтобы лучше понять rotate атрибута, пожалуйста, посмотритеДемонстрация.

Примечание:Другой способ вращения элемента - использование с Функция rotate() в CSS атрибута CSS transform.

Пример

Пример 1

Измените вращение элемента:

div {
  rotate: 30deg;
}

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

Пример 2

Когда rotate Элемент вращается вокруг вектора и угла.

Здесь вектор - это плоскость в двумерном пространстве [1 1 0], с координатами x и y, затем вращение на 60 градусов:

div {
  rotate: 1 1 0 60deg;
}

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

Синтаксис CSS

rotate: axis angle|initial|inherit;

Значение атрибута

Значение Описание
axis

Опционально. Если не установлено, значение по умолчанию - ось z. Определяет ось вращения элемента. Возможные значения:

  • x
  • y
  • z
angle

Определяет степень вращения элемента. Возможные единицы:

  • deg（градусы）
  • rad（радианы）
  • turn（круги）
vector angle

Три числа определяют вектор, вокруг которого элемент будет вращаться.

Эти три числа分别是 координаты вектора x, y и z.

Последнее значение - это угол поворота.

Возможные значения:

number number number angle
initial Установите этот атрибут в его значение по умолчанию. См. initial.
inherit Ингерит этот атрибут от родительского элемента. См. inherit.

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

Значение по умолчанию: none
Ингерит: Нет
Создание анимации: Поддерживается. См. также:Свойства анимации.
Версия: CSS3
JavaScript синтаксис: object.style.rotate="-120deg"

Поддержка браузеров

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

Chrome Edge Firefox Safari Opera
104 104 72 14.1 90

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

Урок:CSS 2D transform

Урок:3D-трансформации CSS

Ссылка:Свойство CSS scale

Ссылка:Свойство translate в CSS

  • Предыдущая страница Справа
  • Следующая страница row-gap