cos()
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 cos() trong CSS là một hàm lượng giác trả về cosine của một số, là giá trị nằm giữa -1 và 1. Hàm chứa một phép tính duy nhất phải giải thành <number> hoặc <angle> bằng cách diễn giải kết quả của đối số theo radian. Nghĩa là, cos(45deg), cos(0.125turn), và cos(3.14159 / 4) đều đại diện cho 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 * cos(45deg));
width: calc(100px * cos(0.125turn));
width: calc(100px * cos(0.785398163rad));
/* Giá trị <number> đơn lẻ */
width: calc(100px * cos(63.673));
width: calc(100px * cos(2 * 0.125));
/* Các giá trị khác */
width: calc(100px * cos(pi));
width: calc(100px * cos(e / 2));
Tham số
Hàm cos(angle) chỉ chấp nhận một giá trị làm tham số.
Giá trị trả về
Cosine của một angle luôn trả về một số nằm giữa −1 và 1.
- Nếu
anglelàinfinity,-infinity, hoặcNaN, kết quả làNaN.
Cú pháp hình thức
<cos()> =
cos( <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ụ
Giữ kích thước của hộp được xoay
Hàm cos() có thể được sử dụng để giữ kích thước của hộp được xoay.
Khi phần tử được xoay bằng rotate(), nó vượt ra ngoài kích thước ban đầu của nó. Để khắc phục điều này, chúng ta sẽ sử dụng cos() để cập nhật kích thước phần tử.
Ví dụ, nếu bạn xoay một hình vuông 100px/100px 45deg, hình thoi mà nó tạo ra sẽ rộng hơn và cao hơn hình vuông ban đầu. Để thu nhỏ hình thoi vào hộp được phân bổ cho hình vuông ban đầu, bạn phải thu nhỏ hình thoi bằng công thức này: width = height = 100px * cos(45deg) = 100px * 0.707 = 70.7px. Bạn cũng cần điều chỉnh transform-origin và thêm translate() để sửa vị trí:
HTML
<div class="original-square"></div>
<div class="rotated-diamond"></div>
<div class="rotated-scaled-diamond"></div>
CSS
div.original-square {
width: 100px;
height: 100px;
background-color: blue;
}
div.rotated-diamond {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
}
div.rotated-scaled-diamond {
width: calc(100px * cos(45deg));
height: calc(100px * cos(45deg));
margin: calc(100px / 4 * cos(45deg));
transform: rotate(45deg);
transform-origin: center;
background-color: green;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Values and Units Module Level 4 # trig-funcs |