sin()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.
Hàm sin() CSS function là một hàm lượng giác trả về sin của một số, là giá trị nằm trong khoảng từ -1 đến 1. Hàm nhận một phép tính duy nhất phải cho kết quả là <number> hoặc <angle> bằng cách diễn giải kết quả của đối số theo radian. Tức là sin(45deg), sin(0.125turn) và sin(3.14159 / 4) đều biểu diễn cùng một giá trị, xấp xỉ 0.707.
Try it
transform: translateX(calc(cos(0deg) * 140px))
translateY(calc(sin(0deg) * -140px));
transform: translateX(calc(cos(90deg) * 140px))
translateY(calc(sin(90deg) * -140px));
transform: translateX(calc(cos(135deg) * 140px))
translateY(calc(sin(135deg) * -140px));
transform: translateX(calc(cos(180deg) * 140px))
translateY(calc(sin(180deg) * -140px));
transform: translateX(calc(cos(-45deg) * 140px))
translateY(calc(sin(-45deg) * -140px));
<div class="circle">
<span class="dot" id="example-element"></span>
</div>
:root {
--radius: 140px;
--dot-size: 10px;
}
.circle {
display: grid;
place-content: center;
margin: 0 auto;
width: calc(var(--radius) * 2);
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid #666666;
background-image:
radial-gradient(black var(--dot-size), transparent var(--dot-size)),
linear-gradient(135deg, blue, deepskyblue, lightgreen, lavender, honeydew);
}
.dot {
display: block;
width: var(--dot-size);
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid #666666;
background-color: #ff6666;
transform: translateX(calc(cos(0deg) * var(--radius)))
translateY(calc(sin(0deg) * var(--radius) * -1));
}
Cú pháp
/* Giá trị <angle> đơn lẻ */
width: calc(100px * sin(45deg));
width: calc(100px * sin(0.25turn));
width: calc(100px * sin(1.0471967rad));
/* Giá trị <number> đơn lẻ */
width: calc(100px * sin(63.673));
width: calc(100px * sin(2 * 0.125));
/* Các giá trị khác */
width: calc(100px * sin(pi / 2));
width: calc(100px * sin(e / 4));
Tham số
Hàm sin(angle) chỉ nhận một giá trị duy nhất làm tham số.
Giá trị trả về
Sin của angle luôn trả về một số nằm trong khoảng từ −1 đến 1.
- Nếu
anglelàinfinity,-infinityhoặcNaN, kết quả làNaN. - Nếu
anglelà0⁻, kết quả là0⁻.
Cú pháp chính thức
<sin()> =
sin( <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ụ
Thay đổi kích thước hộp
Trong ví dụ này, sin(30deg) sẽ trả về 0.5, làm cho hộp có chiều rộng 50px và chiều cao 50px.
div {
background-color: red;
width: calc(sin(30deg) * 100px);
height: calc(sin(30deg) * 100px);
}
Kiểm soát thời lượng hoạt ảnh
Một trường hợp sử dụng khác là kiểm soát animation-duration, rút ngắn thời lượng dựa trên giá trị sin. Trong trường hợp này, thời lượng hoạt ảnh sẽ là 1s.
div {
animation-name: myAnimation;
animation-duration: calc(sin(0.25turn) * 1s);
}
Thông số kỹ thuật
| Specification |
|---|
| CSS Values and Units Module Level 4 # trig-funcs |