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

Синтаксис

Тип данных <angle> состоит из числа (<number>), за которым следует одна из единиц измерения, представленные ниже. Между литералом единицы измерения и цифрой нет пробела. После 0 указывать единицу измерения необязательно.

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

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

deg

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

grad
Представляет угол в градианах. Один полный круг равен 400grad. Например: 0grad100grad38.8grad.
rad
Представляет угол в радианах. Один полный круг равен 2π или примерно 6.2832rad1rad - это 180/π градусов. Например: 0rad1.0708rad6.2832rad.
turn
Представляет угол в количестве оборотов. Один полный круг равен 1turn. Например: 0turn0.25turn1.2turn.

Примеры

Angle90.png

Прямой угол: 90deg = 100grad = 0.25turn 1.5708rad

Angle180.png Развернутый угол: 180deg = 200grad = 0.5turn 3.1416rad
AngleMinus90.png Прямой угол (против часовой стрелки): -90deg = -100grad = -0.25turn -1.5708rad
Angle0.png

Нулевой угол: 0deg = 0grad = 0turn = 0rad

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

Specification Status Comment
CSS Values and Units Module Level 3
Определение '<angle>' в этой спецификации.
Кандидат в рекомендации  

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2 (528.17) 3.6 (1.9.2) 9.0 Нет 4.0 (528.17)
turn unit Нет 13.0 9.0 Нет Нет
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Да) ? Нет ?
turn unit Нет 13.0 ? Нет Нет

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: ChristinaKrapivina, Sebastianz, andreww2012
Обновлялась последний раз: ChristinaKrapivina,