asin() CSS function
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.
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 an <angle> between -90deg and 90deg.
Syntax
css
/* 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));
Parameters
The asin(number) function accepts only one value as its parameter.
Return value
The inverse sine of a number will always return an <angle> between -90deg and 90deg.
- If
numberis less than-1or greater than1, the result isNaN. - If
numberis0⁻, the result is0⁻.
Formal syntax
<asin()> =
asin( <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 asin() 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;
background: linear-gradient(orange, red);
}
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));
}
Result
Specifications
| Specification |
|---|
| CSS Values and Units Module Level 4 # trig-funcs |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
asin()
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support