Тип данных CSS <angle>
представляет собой значение угла, выраженное в градусах, градах, радианах или оборотах. Он используется, например, в <gradient>
и в некоторых функциях transform
.
Синтаксис
Тип данных <angle>
состоит из числа (<number>
), за которым следует одна из единиц измерения, представленные ниже. Между литералом единицы измерения и цифрой нет пробела. После 0
указывать единицу измерения необязательно.
Опционально перед числом может стоять знак +
или -
. Положительное значение отмеряется по часовой стрелке, а отрицательные – против часовой. Чтобы достичь статистических свойств, каждый угол может быть представлен разными значениями, эквивалентными друг другу. Например, 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
.
Примеры
![]() |
Прямой угол: |
![]() |
Развернутый угол: 180deg = 200grad = 0.5turn ≈ 3.1416rad |
![]() |
Прямой угол (против часовой стрелки): -90deg = -100grad = -0.25turn ≈ -1.5708rad |
![]() |
Нулевой угол: |
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
CSS Values and Units Module Level 4 Определение '<angle>' в этой спецификации. |
Редакторский черновик | |
CSS Values and Units Module Level 3 Определение '<angle>' в этой спецификации. |
Кандидат в рекомендации | Изначальное определение. |
Совместимость с браузерами
Компьютеры | Мобильные | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<angle> | Chrome Полная поддержка 2 | Edge Полная поддержка 12 | Firefox Полная поддержка 3.6 | IE Полная поддержка 9 | Opera Полная поддержка 15 | Safari Полная поддержка 4 | WebView Android Полная поддержка 2 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 14 | Safari iOS Полная поддержка 3.2 | Samsung Internet Android Полная поддержка 1.0 |
deg | Chrome Полная поддержка 2 | Edge Полная поддержка 12 | Firefox Полная поддержка 3.6 | IE Полная поддержка 9 | Opera Полная поддержка 15 | Safari Полная поддержка 4 | WebView Android Полная поддержка 2 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 14 | Safari iOS Полная поддержка 3.2 | Samsung Internet Android Полная поддержка 1.0 |
grad | Chrome Полная поддержка 2 | Edge Полная поддержка 12 | Firefox Полная поддержка 3.6 | IE Полная поддержка 9 | Opera Полная поддержка 15 | Safari Полная поддержка 4 | WebView Android Полная поддержка 2 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 14 | Safari iOS Полная поддержка 3.2 | Samsung Internet Android Полная поддержка 1.0 |
rad | Chrome Полная поддержка 2 | Edge Полная поддержка 12 | Firefox Полная поддержка 3.6 | IE Полная поддержка 9 | Opera Полная поддержка 15 | Safari Полная поддержка 4 | WebView Android Полная поддержка 2 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 14 | Safari iOS Полная поддержка 3.2 | Samsung Internet Android Полная поддержка 1.0 |
turn | Chrome Полная поддержка 2 | Edge Полная поддержка 12 | Firefox Полная поддержка 13 | IE Полная поддержка 9 | Opera Полная поддержка 15 | Safari Полная поддержка 4 | WebView Android Полная поддержка 2 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 14 | Opera Android Полная поддержка 14 | Safari iOS Полная поддержка 3.2 | Samsung Internet Android Полная поддержка 1.0 |
Легенда
- Полная поддержка
- Полная поддержка