rotate()

Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!

Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством transform-origin, не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется точечным отражением.

Синтаксис

rotate(a)

Значения

a
Является <angle>, представляющим угол поворота. Положительный угол обозначает вращение по часовой стрелке, а отрицательный - против часовой стрелки.
Декартовы координаты на ℝ2 Однородные координаты на ℝℙ2 Декартовы координаты наℝ3 Однородные координаты наℝℙ3
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]

Примеры

HTML

<p>foo</p>
<p class="transformed">bar</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed{
  /* identical to rotateZ(45deg); */
  transform: rotate(45deg);
  background-color: blue;
}

Результат