cos()
Baseline 2023
Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
CSS 函数 cos()
为三角函数,返回某数的余弦值,此值介于 -1
和 1
之间。此函数含有单个计算式,此式须将参数结果按弧度数解析为 <number>
或 <angle>
,即 cos(45deg)
、cos(0.125turn)
和 cos(3.14159 / 4)
均表示同一值,约为 0.707
。
语法
css
/* 单个 <angle> 值 */
width: calc(100px * cos(45deg));
width: calc(100px * cos(0.125turn));
width: calc(100px * cos(0.785398163rad));
/* 单个 <number> 值 */
width: calc(100px * cos(63.673));
width: calc(100px * cos(2 * 0.125));
/* 其他值 */
width: calc(100px * cos(pi));
width: calc(100px * cos(e / 2));
参数
返回值
angle
的余弦值总将返回介于 −1
和 1
之间的数。
- 若
angle
为infinity
、-infinity
或NaN
,则结果为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;
}
结果
规范
Specification |
---|
CSS Values and Units Module Level 4 # trig-funcs |
浏览器兼容性
BCD tables only load in the browser