# atan()

## Baseline2023

Newly available

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

## Syntax

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

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

### Parameters

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-keyword>  |  ( <calc-sum> )  <calc-keyword> =   e          |  pi         |  infinity   |  -infinity  |  NaN        `

## Examples

### Rotate elements

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

#### HTML

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

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