# asin()

The `asin()` CSS function is a trigonometric function that returns the inverse sine of a number between `-1` and `1`. 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(asin(-0.2));
transform: rotate(asin(2 * 0.125));

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

### Parameter

The `asin(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 sine of an `number` will always return an `<angle>` between `-90deg` and `90deg`.

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

### Formal syntax

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

## Specifications

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

## Browser compatibility

BCD tables only load in the browser