atan2()
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 atan2() là một hàm lượng giác trả về arctan của hai giá trị trong khoảng -infinity đến infinity. Hàm chấp nhận hai đối số và trả về <angle> trong khoảng -180deg đến 180deg, không kèm theo bất kỳ đơn vị cụ thể nào như radian.
Cú pháp
/* Two <number> values */
transform: rotate(atan2(3, 2));
/* Two <dimension> values */
transform: rotate(atan2(1rem, -0.5rem));
/* Two <percentage> values */
transform: rotate(atan2(20%, -30%));
/* Other values */
transform: rotate(atan2(pi, 45));
transform: rotate(atan2(e, 30));
Tham số
Hàm atan2(y, x) chấp nhận hai giá trị được phân cách bằng dấu phẩy làm tham số. Mỗi giá trị có thể là <number>, <dimension>, hoặc <percentage>. Cả hai giá trị phải cùng kiểu, mặc dù nếu chúng là <dimension> thì có thể có các đơn vị khác nhau (ví dụ: atan2(100px, 5vw) hợp lệ).
y-
Tọa độ y của điểm. Một phép tính được phân giải thành
<number>,<dimension>, hoặc<percentage>. x-
Tọa độ x của điểm. Một phép tính được phân giải thành
<number>,<dimension>, hoặc<percentage>.
Giá trị trả về
Cho hai giá trị x và y, hàm atan2(y, x) tính toán và trả về <angle> giữa trục x dương và tia từ gốc tọa độ đến điểm (x, y).
Cú pháp chính thức
<atan2()> =
atan2( <calc-sum> , <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 atan2() có thể được dùng để xoay các phần tử vì nó trả về <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;
background: linear-gradient(orange, red);
}
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));
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Values and Units Module Level 4 # trig-funcs |