asin()
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.
Hàm CSS asin() là một hàm lượng giác trả về arcsin (hàm sin ngược) của một số trong khoảng -1 đến 1. Hàm chứa một phép tính duy nhất trả về <angle> trong khoảng -90deg đến 90deg.
Cú pháp
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));
Tham số
Hàm asin(number) chỉ chấp nhận một giá trị làm tham số.
Giá trị trả về
Arcsin của number sẽ luôn trả về <angle> trong khoảng -90deg đến 90deg.
- Nếu
numbernhỏ hơn-1hoặc lớn hơn1, kết quả làNaN. - Nếu
numberlà0⁻, kết quả là0⁻.
Cú pháp chính thức
<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
Ví dụ
Xoay các phần tử
Hàm asin() có thể được dùng để xoay các phần tử vì nó trả về <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));
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Values and Units Module Level 4 # trig-funcs |