atan()

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`.

Syntax

``````/* Single <number> values */
transform: rotate(atan(1));
transform: rotate(atan(4 * 50));

/* Other values */
transform: rotate(atan(pi / 2));
transform: rotate(atan(e * 3));
``````

Parameter

The `atan(number)` function accepts only one value as its parameter.

`number`

A calculation which resolves to a `<number>` between `-∞` and `+∞`.

Return value

The inverse tangent of an `number` will always return an `<angle>` between `-90deg` and `90deg`.

• If `number` is `0⁻`, the result is `0⁻`.
• If `number` is `+∞` the result is `90deg`.
• If `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`.

Formal syntax

`<atan()> =   atan( <calc-sum> )  <calc-sum> =   <calc-product> [ [ '+' | '-' ] <calc-product> ]*  <calc-product> =   <calc-value> [ [ '*' | '/' ] <calc-value> ]*  <calc-value> =   <number>         |  <dimension>      |  <percentage>     |  <calc-constant>  |  ( <calc-sum> )   <calc-constant> =   e          |  pi         |  infinity   |  -infinity  |  NaN        `

Examples

Rotate elements

The `atan()` function can be used to `rotate` elements as it return an `<angle>`.

HTML

``````<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>
``````

CSS

``````div.box {
width: 100px;
height: 100px;
}
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));
}
``````

Specifications

Specification
CSS Values and Units Module Level 4
# trig-funcs

Browser compatibility

BCD tables only load in the browser