<angle> CSS 자료형은 각도의 값을 도, 그레이드, 라디안 또는 턴으로 표현합니다. <gradient>나 일부 transform 함수에서 사용합니다..

구문

<angle> 자료형은 <number> 다음에 아래 나열한 단위 중 하나를 붙여 구성합니다. 다른 CSS 단위처럼 숫자와 단위 문자 사이에 공백은 존재하지 않습니다. 숫자 0 뒤에는 단위를 붙이지 않아도 됩니다.

선택적으로 +- 부호를 표시할 수 있습니다. 양의 부호는 시계방향 회전을, 음의 부호는 시계 반대방향 회전을 나타냅니다. 정적 속성에선 하나의 각도를 다른 각도로 표현할 수 있습니다. 예컨대 90deg-270deg, 1turn4turn과 동일합니다. 그러나 동적 속성, 즉 animation이나 transition에서는 결과가 달라집니다.

단위

deg
각도를 도 단위로 나타냅니다. 1회전은 360deg입니다. 예: 0deg, 90deg, 14.23deg
grad
각도를 그레이드로 나타냅니다. 1회전은 400grad입니다. 예: 0grad, 100grad38.8grad
rad
각도를 라디안으로 나타냅니다. 1회전은 2π 라디안으로 약 6.2832rad입니다. 1rad는 180/πdeg입니다. 예: 0rad, 1.0708rad, 6.2832rad
turn
각도를 회전의 수로 나타냅니다. 1회전은 1turn입니다. 예: 0turn, 0.25turn, 1.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 0 = 0deg = 0grad = 0turn = 0rad

명세

Specification Status Comment
CSS Values and Units Module Level 3
The definition of '<angle>' in that specification.
Candidate Recommendation Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 2Edge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support YesSafari Full support 4WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
degChrome Full support 2Edge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support YesSafari Full support 4WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
gradChrome Full support 2Edge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support YesSafari Full support 4WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
radChrome Full support 2Edge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support YesSafari Full support 4WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
turnChrome Full support YesEdge Full support 12Firefox Full support 13IE Full support 9Opera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 14Opera Android Full support YesSafari iOS Full support 10Samsung Internet Android Full support Yes

Legend

Full support  
Full support

문서 태그 및 공헌자

이 페이지의 공헌자: urty5656
최종 변경자: urty5656,