atan()

Cú pháp

/* Single <number> values */
transform: rotate(atan(1));
transform: rotate(atan(4 * 50));

/* Other values */
transform: rotate(atan(pi / 2));
transform: rotate(atan(e * 3));

Tham số

Hàm atan(number) chỉ chấp nhận một giá trị làm tham số.

number

Một phép tính được phân giải thành <number> trong khoảng -∞ đến +∞.

Giá trị trả về

Arctan của number sẽ luôn trả về <angle> trong khoảng -90deg đến 90deg.

• Nếu number là 0⁻, kết quả là 0⁻.
• Nếu number là +∞, kết quả là 90deg.
• Nếu number là -∞, kết quả là -90deg.

Tức là:

• atan(-infinity) biểu diễn -90deg.
• atan(-1) biểu diễn -45deg
• atan(0) biểu diễn 0deg
• atan(1) biểu diễn 45deg
• atan(infinity) biểu diễn 90deg.

Cú pháp chính thức

<atan()> = 
  atan( <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 atan() 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

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(atan(-99999));
}
div.box-2 {
  transform: rotate(atan(-1));
}
div.box-3 {
  transform: rotate(atan(0));
}
div.box-4 {
  transform: rotate(atan(1));
}
div.box-5 {
  transform: rotate(atan(99999));
}

Kết quả

Đặc tả kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• sin()
• cos()
• tan()
• asin()
• acos()
• atan2()