在 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 组件。