Trang này được dịch bởi Cloud Translation API.

Hàm lượng giác trong CSS

Tính sin, cosin, tang và các phép tính khác trong CSS.

Bramus

Hàm lượng giác

Trong CSS, bạn có thể viết biểu thức toán học. Ở phần cơ sở, hàm calc() dùng để tính toán, nhưng rất có thể bạn cũng từng nghe nói đến min(), max() và clamp().

Kết hợp các hàm này là các hàm lượng giác sin(), cos(), tan(), asin(), acos(), atan() và atan2(). Các hàm này được định nghĩa trong Mô-đun Giá trị và Đơn vị CSS cấp 4 và có sẵn trong tất cả các trình duyệt.

Hỗ trợ trình duyệt

111
111
108
15,4

Nguồn

`sin()`, `cos()` và `tan()`

Ba hàm lượng giác chính là:

cos(): Trả về cosin của một góc, là giá trị từ -1 đến 1.
sin(): Trả về sin của một góc, là giá trị từ -1 đến 1.
tan(): Trả về tang của một góc, là giá trị từ −∞ đến +∞.

Không giống như các hàm JavaScript, các hàm này chấp nhận cả góc và radian làm đối số của chúng.

Trong bản minh hoạ sau đây, các hàm này dùng để vẽ các đường tạo thành tam giác bao quanh tập hợp --angle:

" cạnh huyền" (đường màu vàng) là một đường tính từ tâm vòng tròn đến vị trí của dấu chấm. Độ dài của vòng tròn này bằng --radius của vòng tròn.
"Đường kẻ liền kề" (đường màu đỏ) là một đường tính từ tâm vòng tròn dọc theo trục X. Chiều dài của hàm này bằng --radius nhân với cosin của --angle.
"Đối diện" (đường màu xanh dương) là một đường tính từ tâm của dấu chấm dọc theo trục Y. Độ dài của hàm này bằng --radius nhân với sin của --angle.
Hàm tan() của --angle dùng để vẽ đường màu xanh lục từ dấu chấm về trục X.

`asin()`, `acos()`, `atan()` và `atan2()`

Vòng cung hoặc ngược với sin(), cos() và tan() lần lượt là asin(), acos() và atan(). Các hàm này thực hiện phép tính theo hướng ngược lại: chúng lấy một giá trị số làm đối số và trả về góc tương ứng cho đối số đó.

Cuối cùng, chúng ta có atan2() chấp nhận 2 đối số A và B. Hàm này trả về góc giữa trục X dương và điểm (B,A).

Ví dụ

Có nhiều trường hợp sử dụng cho các hàm này. Tiếp theo là một lựa chọn nhỏ.

Di chuyển các mục trên một đường tròn quanh điểm trung tâm

Trong bản minh hoạ sau đây, các dấu chấm xoay quanh một điểm trung tâm. Thay vì xoay từng dấu chấm xung quanh tâm của chính nó rồi di chuyển ra ngoài, mỗi dấu chấm sẽ được dịch chuyển trên trục X và Y. Khoảng cách trên trục X và Y được xác định bằng cách xét đến cos() và sin() của --angle tương ứng.

:root {
  --radius: 20vmin;
}

.dot {
  --angle: 30deg;
  translate: /* Translation on X-axis */
             calc(cos(var(--angle)) * var(--radius))

             /* Translation on Y-axis */
             calc(sin(var(--angle)) * var(--radius) * -1)
  ;
}

Để phân phối các dấu chấm đồng đều quanh điểm trung tâm, mỗi dấu chấm được thêm một độ lệch dựa trên chỉ mục nth-child. Ví dụ: nếu có ba dấu chấm, thì khoảng cách giữa mỗi dấu chấm sẽ là 120deg (= 360deg / 3).

Phần tử con đầu tiên trong số 3 phần tử con có độ lệch là 0 x 120deg = 0deg.
Phần tử con thứ hai trong số 3 phần tử con có độ lệch là 1 x 120deg = 120deg.
Phần tử con thứ ba trong số 3 phần tử con được bù trừ 2 x 120deg = 240deg.

Xoay một phần tử để quay về phía điểm gốc của phần tử đó

Hàm atan2() tính góc tương đối từ một điểm đến một điểm khác. Hàm này chấp nhận 2 giá trị được phân tách bằng dấu phẩy làm tham số: vị trí y và x của điểm khác, tương ứng với điểm ban đầu nằm tại gốc 0,0.

Với giá trị đã tính toán, bạn có thể xoay các phần tử để chúng đối diện với nhau, bằng cách sử dụng Thuộc tính biến đổi riêng lẻ.

Trong ví dụ sau, các hộp được xoay để chúng đối diện với vị trí của chuột. Vị trí chuột được đồng bộ hoá với thuộc tính tuỳ chỉnh thông qua JavaScript.

div.box {
  --my-x: 200;
  --my-y: 300;

  /* Position the box inside its parent */
  position: absolute;
  width: 50px;
  aspect-ratio: 1;
  translate: calc((var(--my-x) * 1px)) calc(var(--my-y) * 1px);

  /* Rotate so that the box faces the mouse position */
  /* For this, take the box its own position and size (25 = half the width) into account */
  rotate: atan2(
            calc((var(--mouse-x) - var(--my-x) - 25) * 1),
            calc((var(--mouse-y) - var(--my-y) - 25) * -1)
          );
}

Nội dung nổi bật của cộng đồng

Như đã minh hoạ trong chuỗi hình ảnh động về Möbius của Ana Tudor, cos() và sin() có thể được sử dụng cho nhiều mục đích khác chứ không chỉ dịch. Ở đây, kết quả của chúng được dùng để thao tác với các thành phần s và l của hàm màu hsl().