# atan2()

The `atan2()` CSS function is a trigonometric function that returns the inverse tangent of two values between `-infinity` and `infinity`. The function accepts two arguments and returns the number of radians representing an `<angle>` between `-180deg` and `180deg`.

## Syntax

``````/* Single <number> values */
transform: rotate(atan2(3, 2));

/* Single <dimension> values */
transform: rotate(atan2(1rem, -0.5rem));

/* Single <percentage> values */
transform: rotate(atan2(20%, -30%));

/* Other values */
transform: rotate(atan2(pi, 45));
transform: rotate(atan2(e, 30));
``````

### Parameters

The `atan2(y, x)` function accepts two comma-separated values as its parameters. Each value can be a `<number>`, a `<dimension>`, or a `<percentage>`. Both values must be of the same type, although if they are `<dimension>` they can be of different units (example: `atan2(100px, 5vw)` is valid).

`y`

The y coordinate of the point. A calculation which resolves to a `<number>`, a `<dimension>`, or a `<percentage>`.

`x`

The x coordinate of the point. A calculation which resolves to a `<number>`, a `<dimension>`, or a `<percentage>`.

### Return value

Given two points `x` and `y`, the function `atan2(y, x)` calculates and returns the `<angle>` between the positive `x` axis and the ray from the origin to the point `(x, y)`.

### Formal syntax

`<atan2()> =   atan2( <calc-sum> , <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 `atan2()` 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(atan2(3, 2));
}
div.box-2 {
transform: rotate(atan2(3%, -2%));
}
div.box-3 {
transform: rotate(atan2(-1, 0.5));
}
div.box-4 {
transform: rotate(atan2(1, 0.5));
}
div.box-5 {
transform: rotate(atan2(1rem, -0.5rem));
}
``````

## Specifications

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

## Browser compatibility

BCD tables only load in the browser