Тип CSS `<angle>`

<angle> — это CSS тип данных, представляющий значение угла, выраженное в градусах, градах, радианах или оборотах. Он используется, например, в <gradient>ах и некоторых функциях transform.

Попробуйте

transform: rotate(45deg);

transform: rotate(3.1416rad);

transform: rotate(-50grad);

transform: rotate(1.75turn);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This box can rotate to different angles.
  </div>
</section>

#example-element {
  background-color: #0118f3;
  padding: 0.75em;
  width: 180px;
  height: 120px;
  color: white;
}

Синтаксис

Тип данных <angle> состоит из <number>, за которым следует одна из перечисленных ниже единиц измерения. Как и для всех размерных значений, между обозначением единицы измерения и числом не ставится пробел. Хотя в некоторых устаревших случаях допускается 0 без единицы измерения, для нулевых значений всегда следует указывать единицу, например: 0deg, 0grad, 0rad или 0turn.

Перед значением может быть указан один знак — + или -. Положительные числа обозначают углы по часовой стрелке, а отрицательные — против часовой стрелки. Для статических свойств любые значения угла можно представить разными эквивалентными значениями одной и той же единицы измерения. Например, 90deg равно -270deg, а 1turn равно 4turn. Однако для динамических свойств, например при применении animation или transition, эффект будет другим.

Единицы измерения

deg

Обозначает угол в градусах. Полный круг составляет 360deg. Примеры: 0deg, 90deg, 14.23deg.

grad

Обозначает угол в градах. Полный круг составляет 400grad. Примеры: 0grad, 100grad, 38.8grad.

rad

Обозначает угол в радианах. Полный круг составляет 2π радиан, что приблизительно равно 6.2832rad. 1rad — это 180/π градусов. Примеры: 0rad, 1.0708rad, 6.2832rad.

turn

Обозначает угол в количестве оборотов. Полный круг составляет 1turn. Примеры: 0turn, 0.25turn, 1.2turn.

Примеры

Задание прямого угла по часовой стрелке

90deg = 100grad = 0.25turn ≈ 1.5708rad

Задание развёрнутого угла

180deg = 200grad = 0.5turn ≈ 3.1416rad

Задание прямого угла против часовой стрелки

-90deg = -100grad = -0.25turn ≈ -1.5708rad

Задание нулевого угла

0deg = 0grad = 0turn = 0rad

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

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

См. также

• Типы данных CSS
• Тип <gradient>
• Преобразования поворота CSS: rotate(), rotate3d(), rotateX(), rotateY() и rotateZ()
• Преобразования CSS
• Использование преобразований CSS
• Использование градиентов CSS