# acos()

## 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 `acos()` CSS function is a trigonometric function that returns the inverse cosine of a number between `-1` and `1`. The function contains a single calculation that returns the number of radians representing an `<angle>` between `0deg` and `180deg`.

## Syntax

css
``````/* Single <number> values */
transform: rotate(acos(-0.2));
transform: rotate(acos(2 * 0.125));

/* Other values */
transform: rotate(acos(pi / 5));
transform: rotate(acos(e / 3));
``````

### Parameters

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

`number`

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

### Return value

The inverse cosine of an `number` will always return an `<angle>` between `0deg` and `180deg`.

• If `number` is less than `-1` or greater than `1`, the result is `NaN`.
• If `number` is exactly `1`, the result is `0`.

### Formal syntax

`<acos()> =   acos( <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 `acos()` 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(acos(1));
}
div.box-2 {
transform: rotate(acos(0.5));
}
div.box-3 {
transform: rotate(acos(0));
}
div.box-4 {
transform: rotate(acos(-0.5));
}
div.box-5 {
transform: rotate(acos(-1));
}
``````

## Specifications

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

## Browser compatibility

BCD tables only load in the browser