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

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

Tính sin, cos, tang và nhiều hàm 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. Ở cơ sở là hàm calc() để thực hiện các phép tính, nhưng rất có thể bạn cũng đã nghe nói về min(), max() và clamp().

Các hàm lượng giác sin(), cos(), tan(), asin(), acos(), atan() và atan2() cũng tham gia vào các hàm này. Các hàm này được xác định trong Mô-đun giá trị và đơn vị CSS cấp 4 và có sẵn trong tất cả trình duyệt.

Hỗ trợ trình duyệt

Nguồn

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

Ba hàm lượng giác cốt lõi là:

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

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

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

"Đường trung tuyến" (đường màu vàng) là đường thẳng từ tâm của hình tròn đến vị trí của dấu chấm. Độ dài của nó bằng --radius của vòng tròn.
Đường "kề" (đường màu đỏ) là đường từ tâm của vòng tròn dọc theo trục X. Chiều dài của vectơ 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ừ tâm của dấu chấm dọc theo trục Y. Chiều dài của nó bằng --radius nhân với sin của --angle.
Hàm tan() của --angle được dùng để vẽ đường màu xanh lục từ dấu chấm đến trục X.

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

Các đối tượng vòng cung hoặc ngược tương ứng 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: lấy một giá trị số làm đối số và trả về góc tương ứng cho giá trị đó.

Cuối cùng, có atan2() chấp nhận hai đố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. Sau đây là một số lựa chọn nhỏ.

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

Trong bản minh hoạ sau, 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 dấu chấm đó rồi di chuyển ra ngoài, mỗi dấu chấm được dịch 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 tính đế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 đều xung quanh điểm trung tâm, mỗi dấu chấm được thêm một độ dời dựa trên chỉ mục nth-child của dấu chấm đó. Ví dụ: nếu có ba dấu chấm, thì khoảng cách giữa mỗi dấu chấm là 120deg (= 360deg / 3).

Phần tử con đầu tiên trong số 3 phần tử con được bù bằng 0 x 120deg = 0deg.
Phần tử con thứ hai trong số ba phần tử con được bù bằng 1 x 120deg = 120deg.
Phần tử con thứ ba trong số ba phần tử con được bù bằng 2 x 120deg = 240deg.

Xoay một phần tử để hướng về nguồn gốc của phần tử đó

Hàm atan2() tính toán góc tương đối từ một điểm đến điểm khác. Hàm này chấp nhận hai 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 kia, so với điểm gốc nằm ở gốc 0,0.

Với giá trị đã tính, bạn có thể xoay các phần tử để chúng đối diện 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 để hướng về vị trí của chuột. Vị trí con chuột được đồng bộ hoá với một 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)
          );
}

Điểm nổi bật của cộng đồng

Như minh hoạ trong Dải Möbius động của Ana Tudor, cos() và sin() không chỉ dùng để 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().