cos()
cos() CSS 函式是一個三角函式，它返回一個數字的餘弦值，該值介於 -1 和 1 之間。該函式包含一個單一的計算，必須透過將引數結果解釋為弧度來解析為 <number> 或 <angle>。也就是說，cos(45deg)、cos(0.125turn) 和 cos(3.14159 / 4) 都表示相同的值，大約是 0.707。
試一試
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));
}
語法
css
/* Single <angle> values */
width: calc(100px * cos(45deg));
width: calc(100px * cos(0.125turn));
width: calc(100px * cos(0.785398163rad));
/* Single <number> values */
width: calc(100px * cos(63.673));
width: calc(100px * cos(2 * 0.125));
/* Other values */
width: calc(100px * cos(pi));
width: calc(100px * cos(e / 2));
引數
cos(angle) 函式只接受一個值作為其引數。
返回值
angle 的餘弦值將始終返回一個介於 -1 和 1 之間的數字。
- 如果
angle是infinity、-infinity或NaN，則結果是NaN。
正式語法
<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
示例
保持旋轉盒子的大小
cos() 函式可用於保持旋轉盒子的大小。
當元素使用 rotate() 旋轉時，它會超出其初始大小。為了解決這個問題，我們將使用 cos() 來更新元素大小。
例如，如果你將一個 100px/100px 的正方形旋轉 45deg，它形成的菱形會比原始正方形更寬更高。要將菱形縮小到原始正方形分配的框中，你需要使用以下公式縮小菱形：width = height = 100px * cos(45deg) = 100px * 0.707 = 70.7px。你還需要調整 transform-origin 並新增 translate() 來糾正位置
HTML
html
<div class="original-square"></div>
<div class="rotated-diamond"></div>
<div class="rotated-scaled-diamond"></div>
CSS
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;
}
結果
規範
| 規範 |
|---|
| CSS 值和單位模組第 4 級 # trig-funcs |
瀏覽器相容性
載入中…