Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The atan() CSS function is a trigonometric function that returns the inverse tangent of a number between -∞ and +∞. The function contains a single calculation that returns the number of radians representing an <angle> between -90deg and 90deg.
/* Single <number> values */ transform: rotate(atan(1)); transform: rotate(atan(4 * 50)); /* Other values */ transform: rotate(atan(pi / 2)); transform: rotate(atan(e * 3));
The atan(number) function accepts only one value as its parameter.
The inverse tangent of an number will always return an <angle> between -90deg and 90deg.
number is 0⁻, the result is 0⁻.number is +∞ the result is 90deg.number is -∞ the result is -90deg.That is:
atan(-infinity) representing -90deg.atan(-1) representing -45deg
atan(0) representing 0deg
atan(1) representing 45deg
atan(infinity) representing 90deg.<atan()> =
atan( <calc-sum> )
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> =
<calc-value> [ [ '*' | / ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
The atan() function can be used to rotate elements as it return an <angle>.
<div class="box box-1"></div> <div class="box box-2"></div> <div class="box box-3"></div> <div class="box box-4"></div> <div class="box box-5"></div>
div.box {
width: 100px;
height: 100px;
background: linear-gradient(orange, red);
}
div.box-1 {
transform: rotate(atan(-99999));
}
div.box-2 {
transform: rotate(atan(-1));
}
div.box-3 {
transform: rotate(atan(0));
}
div.box-4 {
transform: rotate(atan(1));
}
div.box-5 {
transform: rotate(atan(99999));
}
| Specification |
|---|
| CSS Values and Units Module Level 4> # trig-funcs> |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
atan |
111 | 111 | 108 | 97 | 15.4 | 111 | 108 | 75 | 15.4 | 22.0 | 111 | 15.4 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/atan