Tính sin, cosin, tan và các giá trị khác trong CSS.
Hàm lượng giác
Trong CSS, bạn có thể viết biểu thức toán học. Ở dưới cùng là hàm calc() dùng để tính toán, nhưng có lẽ bạn cũ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 đơn vị và giá trị CSS cấp 4 và có sẵn trên tất cả các trình duyệt.
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, giá trị này nằm trong khoảng từ-1đến1.sin(): Trả về sin của một góc, giá trị này nằm trong khoảng từ-1đến1.tan(): Trả về tang của một góc, là giá trị từ−∞đến+∞.
Không giống như các đối số 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 đây, các hàm này được dùng để vẽ các đường tạo nên hình tam giác xung quanh tập hợp --angle:
- "Dưới cùng" (đường màu vàng) là một đường thẳng từ tâm vòng tròn đến vị trí của dấu chấm. Độ dài của hình tròn này bằng
--radiuscủa đường tròn. - Vùng "liền kề" (đường màu đỏ) là một đường kẻ từ tâm của vòng tròn dọc theo trục X. Độ dài của nó bằng
--radiusnhân với cosin của--angle. - "Trái ngược" (đường màu xanh dương) là một đường kẻ 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
--radiusnhân với sin của--angle. - Hàm
tan()của--angledùng để vẽ đường màu xanh lục từ dấu chấm về phía trục X.
asin(), acos(), atan() và atan2()
Các giá trị arc 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 nhận một giá trị số làm đối số và trả về góc tương ứng.
Cuối cùng, có atan2() chấp nhận hai đối số A và B. Hàm 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 những hàm này. Tiếp theo là một lựa chọn nhỏ.
Di chuyển các mục trên đường tròn xung 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 quanh tâm của chính nó rồi di chuyển ra ngoài, mỗi dấu chấm đượ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 xem xét 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 xung quanh điểm trung tâm, mỗi dấu chấm sẽ được bù trừ thêm dựa trên chỉ mục nth-child của dấu chấm đó. Ví dụ: nếu có 3 dấu chấm thì khoảng cách giữa các dấu chấm là 120deg (= 360deg / 3).
- Phần tử con đầu tiên trong số 3 phần tử con sẽ được bù trừ bằng
0 x 120deg=0deg. - Phần tử con thứ hai trong số 3 phần tử sẽ được bù trừ bằng
1 x 120deg=120deg. - Phần tử con thứ ba trong số 3 phần tử con sẽ được bù trừ bằng
2 x 120deg=240deg.
Xoay một phần tử để hướng về phía gốc
Hàm atan2() tính toán góc tương đối từ điểm này đế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 còn lại, so với điểm xuất phát 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 quay mặt vào 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 hướng về 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 dải Möbius động của Ana Tudor, cos() và sin() có thể không chỉ được dùng cho bản 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().