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