rotate

Базовая версия 2022

Новое

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

Свойство rotate CSS позволяет указывать повороты индивидуально и независимо от свойства transform. Это лучше соответствует обычному использованию пользовательского интерфейса и позволяет не запоминать точный порядок функций преобразования для указания в свойстве transform.

Попробовать

Синтаксис

/* Keyword values */
rotate: none;

/* Angle value */
rotate: 90deg;
rotate: 0.25turn;
rotate: 1.57rad;

/* x, y, or z axis name plus angle */
rotate: x 90deg;
rotate: y 0.25turn;
rotate: z 1.57rad;

/* Vector plus angle value */
rotate: 1 1 1 90deg;

/* Global values */
rotate: inherit;
rotate: initial;
rotate: revert;
rotate: revert-layer;
rotate: unset;

Значения

значение угла: Угол, определяющий угол поворота затронутого элемента вокруг оси Z. Эквивалентно функции rotate() (поворот на 2D).
имя оси x, y или z плюс значение угла: Имя оси, вокруг которой вы хотите повернуть затронутый элемент (x, y, или z), плюс <angle>, определяющий угол поворота элемента. Эквивалентно функциям rotateX()/rotateY()/rotateZ() (поворот на 3D).
вектор плюс значение угла: Три значения <number>, представляющие вектор, начинающийся в начале координат, который определяет линию, вокруг которой вы хотите повернуть элемент, плюс <angle>, определяющий угол поворота элемента. Эквивалентно функции rotate3d() (поворот на 3D).
none: Указывает, что поворот применять не нужно.

Формальное определение

Начальное значение	`none`
Применимо к	преобразуемым элементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	преобразование
Создаёт контекст стекирования	да

Формальный синтаксис

rotate = 
  none                                    |
  <angle>                                 |
  [ x | y | z | <number>{3} ] && <angle>

Примеры

Поворот элемента при наведении

Следующий пример демонстрирует использование свойства rotate для поворота элемента вокруг различных осей при наведении. Первый прямоугольник поворачивается на 90 градусов по оси Z при наведении, второй — на 180 градусов по оси Y при наведении, а третий — на 360 градусов при наведении вокруг вектора, заданного координатами.

HTML

<div class="box" id="box1">rotate Z</div>
<div class="box" id="box2">rotate Y</div>
<div class="box" id="box3">vector & angle</div>

CSS

.box {
  display: inline-block;
  margin: 1em;
  min-width: 6.5em;
  line-height: 6.5em;
  text-align: center;
  transition: 1s ease-in-out;
  border: 0.25em dotted;
}

#box1:hover {
  rotate: 90deg;
}

#box2:hover {
  rotate: y 180deg;
}

#box3:hover {
  rotate: 1 2 1 360deg;
}

Результат

Спецификации

Спецификация
CSS Transforms Module Level 2 # individual-transforms

Совместимость браузеров

	Стационарные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`rotate`	104	104	72	90	14.1	104	79	71	14.5	20.0	104
`none`	104	104	72	90	14.1	104	79	71	14.5	20.0	104
`x_y_z_angle`	104	104	72	90	14.1	104	79	71	14.5	20.0	104

См. также

Примечание: skew не является независимым значением transform

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/rotate