在 CSS 中计算正弦、余弦、正切等。
三角函数
在 CSS 中,可以编写数学表达式。calc()
函数位于底部,用于执行计算,不过您很可能也听说过 min()
、max()
和 clamp()
。
联接这些函数是三角函数 sin()
、cos()
、tan()
、asin()
、acos()
、atan()
和 atan2()
。这些函数在“CSS 值和单位模块级别 4”中定义,适用于所有浏览器。
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
sin()
、cos()
和tan()
核心的三个 trig 函数是:
cos()
:返回角度的余弦值,即介于-1
和1
之间的值。sin()
:返回角度的正弦值,该值介于-1
和1
之间。tan()
:返回角度的正切值,即介于−∞
和+∞
之间的值。
与对应的 JavaScript 函数不同,这些函数同时接受角度和弧度作为其参数。
在下面的演示中,这些函数用于绘制构成围绕 --angle
集的三角形的线条:
- “斜边”(黄线)是从圆心到点位置的线。其长度等于圆的
--radius
。 - “相邻”字段(红线)是沿 X 轴的圆心的一条线。其长度等于
--radius
乘以--angle
的余弦值。 - “相反”(蓝线)是沿着 Y 轴,从点中心起的一条直线。其长度等于
--radius
乘以--angle
的正弦值。 --angle
的tan()
函数用于绘制从该点指向 X 轴的绿线。
asin()
、acos()
、atan()
和atan2()
sin()
、cos()
和 tan()
对应的 arc 或反函数分别是 asin()
、acos()
和 atan()
。这些函数以相反的方向执行计算:它们将数值作为其参数,并返回相应的角度。
最后是 atan2()
,它接受两个参数 A
和 B
。该函数会返回 X 轴正值与点 (B,A)
之间的角度。
示例
这些函数有多种使用场景。接下来是一小部分。
沿着中心点沿着圆形路径移动内容
在下面的演示中,这些点围绕一个中心点旋转。每个点在 X 轴和 Y 轴上平移,而不是绕着每个点的中心向外移动。X 轴和 Y 轴上的距离是通过分别考虑 --angle
的 cos()
和 sin()
来确定的。
:root {
--radius: 20vmin;
}
.dot {
--angle: 30deg;
translate: /* Translation on X-axis */
calc(cos(var(--angle)) * var(--radius))
/* Translation on Y-axis */
calc(sin(var(--angle)) * var(--radius) * -1)
;
}
为了在中心点周围均匀分布点,系统会根据每个点的 nth-child
索引指定额外的偏移量。例如,如果有三个点,则每个点之间的距离为 120deg
(= 360deg / 3
)。
- 三个子元素中的第一个子元素按
0 x 120deg
=0deg
的偏移量进行偏移。 - 第三个子元素(共三个)的偏移量为
1 x 120deg
=120deg
。 - 第三个子元素(共三个)的偏移量为
2 x 120deg
=240deg
。
旋转元素,使其面朝其原点
atan2()
函数会计算从一个点到另一个点的相对角度。该函数接受两个逗号分隔值作为其参数:另一个点的 y
和 x
位置(相对于起点 0,0
的位置)。
通过计算的值,您可以使用个体转换属性来旋转元素,使其彼此相对。
在以下示例中,方框经过了旋转,使其面向鼠标的位置。鼠标位置会通过 JavaScript 同步到自定义属性。
div.box {
--my-x: 200;
--my-y: 300;
/* Position the box inside its parent */
position: absolute;
width: 50px;
aspect-ratio: 1;
translate: calc((var(--my-x) * 1px)) calc(var(--my-y) * 1px);
/* Rotate so that the box faces the mouse position */
/* For this, take the box its own position and size (25 = half the width) into account */
rotate: atan2(
calc((var(--mouse-x) - var(--my-x) - 25) * 1),
calc((var(--mouse-y) - var(--my-y) - 25) * -1)
);
}
社区精选
正如 Ana Tudor 的这个 Möbius 动画连带所示,cos()
和 sin()
不仅仅可用于翻译。在这里,它们的结果用于操控 hsl()
颜色函数的 s
和 l
组件。