CSS-свойство `rotate`

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

Попробуйте

rotate: none;

rotate: -45deg;

rotate: z 45deg;

rotate: x 45deg;

rotate: y 45deg;

rotate: 3 0.5 2 45deg;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 550px;
}

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

Синтаксис

/* 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;

Значения

значение угла

<angle>, задающее угол поворота элемента вокруг оси Z. Эквивалентно функции rotate() (двумерное вращение).

имя оси x, y или z и значение угла

Имя оси, вокруг которой нужно повернуть элемент (x, y или z), и <angle>, задающее угол поворота элемента. Эквивалентно функции rotateX()/rotateY()/rotateZ() (трёхмерное вращение).

вектор и значение угла

Три <number>, представляющие вектор с началом в начале координат, который задаёт ось вращения элемента, и <angle>, задающее угол поворота элемента. Эквивалентно функции rotate3d() (трёхмерное вращение).

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;
}

Результат

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

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

См. также

• translate
• scale
• transform

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