<angle>

Тип данных 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

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

Спецификация Статус Комментарий
CSS Values and Units Module Level 4
Определение '<angle>' в этой спецификации.
Редакторский черновик
CSS Values and Units Module Level 3
Определение '<angle>' в этой спецификации.
Кандидат в рекомендации Изначальное определение.

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
<angle>Chrome Полная поддержка 2Edge Полная поддержка 12Firefox Полная поддержка 3.6IE Полная поддержка 9Opera Полная поддержка 15Safari Полная поддержка 4WebView Android Полная поддержка 2Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 14Safari iOS Полная поддержка 3.2Samsung Internet Android Полная поддержка 1.0
degChrome Полная поддержка 2Edge Полная поддержка 12Firefox Полная поддержка 3.6IE Полная поддержка 9Opera Полная поддержка 15Safari Полная поддержка 4WebView Android Полная поддержка 2Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 14Safari iOS Полная поддержка 3.2Samsung Internet Android Полная поддержка 1.0
gradChrome Полная поддержка 2Edge Полная поддержка 12Firefox Полная поддержка 3.6IE Полная поддержка 9Opera Полная поддержка 15Safari Полная поддержка 4WebView Android Полная поддержка 2Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 14Safari iOS Полная поддержка 3.2Samsung Internet Android Полная поддержка 1.0
radChrome Полная поддержка 2Edge Полная поддержка 12Firefox Полная поддержка 3.6IE Полная поддержка 9Opera Полная поддержка 15Safari Полная поддержка 4WebView Android Полная поддержка 2Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 14Safari iOS Полная поддержка 3.2Samsung Internet Android Полная поддержка 1.0
turnChrome Полная поддержка 2Edge Полная поддержка 12Firefox Полная поддержка 13IE Полная поддержка 9Opera Полная поддержка 15Safari Полная поддержка 4WebView Android Полная поддержка 2Chrome Android Полная поддержка 18Firefox Android Полная поддержка 14Opera Android Полная поддержка 14Safari iOS Полная поддержка 3.2Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка