在 CSS 中计算正弦、余弦、正切等。
三角函数
在 CSS 中，可以编写数学表达式。calc() 函数位于底部，用于执行计算，不过您很可能也听说过 min()、max() 和 clamp()。
联接这些函数是三角函数 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2()。这些函数在“CSS 值和单位模块级别 4”中定义，适用于所有浏览器。
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 组件。