Hàm asin() trong CSS là một tính năng mới cho phép tính toán góc nghịch đảo của sin (arc sine). Nói cách khác, nếu bạn biết giá trị sin của một góc, hàm này sẽ giúp xác định lại chính xác giá trị góc đó. Tương tự như acos(), đây là công cụ quan trọng giúp CSS nâng cao khả năng tính toán, tạo animation khai báo và đồ họa phức tạp.
1. Vai trò của asin()
Hàm asin() thực hiện phép toán tính góc từ giá trị sin (phải trong khoảng -1 đến 1).
- Đầu vào (Input): Một số không có đơn vị trong khoảng
-1đến1. Giá trị ngoài phạm vi này sẽ gây lỗi. - Đầu ra (Output): Giá trị kiểu
<angle>CSS trong khoảng -90deg đến 90deg (hoặc-π/2đếnπ/2radian). Khác biệt so vớiacos()có phạm vi từ0đến180deg.
Ứng dụng chính:
asin() thường được dùng để tính toán góc quay dựa trên tỉ lệ dọc. Ví dụ: mô phỏng chuyển động con lắc, kim đồng hồ hoặc animation đường cong, khi cần chuyển đổi giá trị dọc tuyến tính thành góc chính xác.
2. Cú pháp và tham số
Cú pháp của asin() rất đơn giản, nhận một biểu thức có thể tính ra số.
- Cú pháp:
asin(<calc-sum>) - Tham số
<calc-sum>: - Mô tả: Biểu thức trong ngoặc phải tính ra số trong [-1, 1] không đơn vị.
- Kiểu dữ liệu: Có thể là hằng số (
asin(0.5)), biến CSS (asin(var(--sin-val))) hoặc biểu thứccalc()phức tạp.
3. Mối quan hệ với sin() và acos()
- Với
sin():asin()là hàm ngược củasin(). sin(<angle>):Nhập góc, xuất giá trị sin (-1 đến 1).asin(<number>):Nhập số (-1 đến 1), xuất góc tương ứng.- Lý thuyết:
asin(sin(30deg))sẽ trả về30deg. - Khác biệt với
acos(): acos(x):Nhập giá trị cos (liên quan trục X), xuất góc từ0đến180deg.asin(y):Nhập giá trị sin (liên quan trục Y), xuất góc từ-90degđến90deg.
4. Ứng dụng minh họa: Mô phỏng con lắc
Dùng ví dụ con lắc để thấy sức mạnh của asin(). Góc quay θ của con lắc liên quan đến vị trí ngang x qua công thức sin(θ) = x / L (với L là chiều dài). Khi L=1, θ = asin(x).
Cài đặt:
- Biến CSS
--vi-tri-hoanhđại diện vị trí ngang (từ -1 đến 1). - Góc quay của thanh treo được tính bằng
asin(var(--vi-tri-hoanh)).
.thanh-treo {
--vi-tri-hoanh: 0.7; /* Giá trị do JS cập nhật */
--goc-quay: asin(var(--vi-tri-hoanh));
transform: rotate(var(--goc-quay));
}
Khi --vi-tri-hoanh thay đổi từ -1 đến 1, asin() sinh ra góc từ -90deg đến 90deg, mô phỏng chính xác chuyển động con lắc.
5. Tương thích trình duyệt
Đây là tính năng hiện đại của CSS.
- Trình duyệt hỗ trợ: Ban đầu do Safari triển khai, hiện Chrome, Edge, Firefox phiên bản mới cũng hỗ trợ.
- Lưu ý: Không hỗ trợ trên trình duyệt cũ và IE. Đây là công nghệ hướng tương lai, cần có phương án dự phòng.
6. Hướng dẫn sử dụng
- Kiểm tra phạm vi đầu vào: Luôn giới hạn đầu vào trong [-1, 1] bằng
clamp():asin(clamp(-1, var(--gia-tri), 1)). - Phương án dự phòng: Sử dụng
@supportsđể cung cấp giao diện thay thế khi cần thiết. - Công cụ chuyên dụng: Hàm này phù hợp cho animation phức tạp, không nên dùng cho layout cơ bản.
7. Ví dụ hoàn chỉnh
Dưới đây là ví dụ tương tác minh họa cách asin() chuyển đổi giá trị tuyến tính thành góc theo thời gian thực.
HTML (index.html):
<html lang="vi-VN">
<head>
<meta charset="UTF-8">
<title>Ví dụ hàm `asin()` CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><h1>CSS `asin()` Demo</h1></header>
<main>
<div class="phan-mem">
<h2>Tương tác mô phỏng con lắc</h2>
<p>Di chuyển thanh trượt để thay đổi vị trí ngang (giá trị sin), quan sát thanh treo quay nhờ `asin()`.</p>
<div class="con-lac">
<div class="tam-tre"></div>
<div class="thanh-treo"></div>
<div class="quai-treo"></div>
</div>
<div class="dieu-khien">
<label for="thanh-keo">Giá trị sin: <span id="gia-tri-hien-thi">0</span></label>
<input type="range" id="thanh-keo" min="-1" max="1" step="0.01" value="0">
</div>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
CSS (style.css):
:root {
--gia-tri-sin: 0; /* Biến do JS cập nhật */
}
body { font-family: 'Segoe UI', sans-serif; margin: 0; background: #f0f2f5; color: #333; }
header { background: #198754; color: #fff; padding: 20px; text-align: center; margin-bottom: 30px; }
main { max-width: 600px; margin: 0 auto; padding: 0 20px; }
.phan-mem { background: #fff; padding: 20px; border-radius: 8px; text-align: center; }
.con-lac {
position: relative;
width: 2px;
height: 200px;
margin: 40px auto;
display: flex;
justify-content: center;
}
.tam-tre {
position: absolute;
top: -5px;
width: 10px;
height: 10px;
background: #333;
border-radius: 50%;
z-index: 2;
}
.thanh-treo {
width: 4px;
height: 150px;
background: #6c757d;
border-radius: 2px;
transform-origin: top center;
--goc-quay: asin(var(--gia-tri-sin));
transform: rotate(var(--goc-quay));
transition: transform 0.1s linear;
}
.quai-treo {
position: absolute;
bottom: 30px;
left: 50%;
width: 40px;
height: 40px;
background: #0d6efd;
border-radius: 50%;
transform: translateX(-50%) translateX(calc(var(--gia-tri-sin) * 150px));
transition: transform 0.1s linear;
}
.dieu-khien { margin-top: 20px; }
.dieu-khien label { font-weight: bold; }
input[type="range"] { width: 80%; max-width: 400px; margin-top: 10px; }
JavaScript (script.js):
document.addEventListener('DOMContentLoaded', () => {
const thanhKeo = document.getElementById('thanh-keo');
const hienThiGiaTri = document.getElementById('gia-tri-hien-thi');
const root = document.documentElement;
thanhKeo.addEventListener('input', (e) => {
const giaTriSin = parseFloat(e.target.value);
root.style.setProperty('--gia-tri-sin', giaTriSin);
hienThiGiaTri.textContent = giaTriSin.toFixed(2);
});
});
Cách kiểm tra:
- Lưu ba đoạn mã trên vào
index.html,style.css,script.jstrong cùng thư mục. - Mở
index.htmlbằng trình duyệt hiện đại (Chrome, Firefox, Edge, Safari). - Thao tác thanh trượt:
- Khi ở vị trí trái nhất (-1),
asin(-1)= -90deg, thanh treo lệch trái. - Khi ở giữa (0),
asin(0)= 0deg, thanh treo thẳng đứng. - Khi ở phải nhất (1),
asin(1)= 90deg, thanh treo lệch phải.
Ví dụ này thể hiện rõ cách asin() chuyển đổi giá trị tuyến tính thành góc quay mượt mà, mô phỏng chuyển động con lắc. Điều này khẳng định tiềm năng của hàm lượng giác CSS trong tạo animation vật lý và hình học phức tạp.