cos()
cos()
CSS 函数 是一个三角函数,它返回一个数字的余弦值,该值介于 -1
和 1
之间。该函数包含一个必须解析为 <number>
或 <angle>
的单个计算,方法是将参数的结果解释为弧度。也就是说,cos(45deg)
、cos(0.125turn)
和 cos(3.14159 / 4)
都表示相同的值,大约为 0.707
。
语法
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));
参数
返回值
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;
}
结果
规范
规范 |
---|
CSS 值和单位模块 第 4 级 # trig-funcs |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。