CSS 中的三角函数

在 CSS 中计算正弦、余弦、正切等。

三角函数

在 CSS 中,可以编写数学表达式calc() 函数位于底部,用于执行计算,不过您很可能也听说过 min()max()clamp()

联接这些函数是三角函数 sin()cos()tan()asin()acos()atan()atan2()。这些函数在“CSS 值和单位模块级别 4”中定义,适用于所有浏览器。

浏览器支持

  • Chrome:111。 <ph type="x-smartling-placeholder">
  • Edge:111。 <ph type="x-smartling-placeholder">
  • Firefox:108。 <ph type="x-smartling-placeholder">
  • Safari:15.4. <ph type="x-smartling-placeholder">

来源

sin()cos()tan()

核心的三个 trig 函数是:

  • cos():返回角度的余弦值,即介于 -11 之间的值。
  • sin():返回角度的正弦值,该值介于 -11 之间。
  • tan():返回角度的正切值,即介于 −∞+∞ 之间的值。

与对应的 JavaScript 函数不同,这些函数同时接受角度和弧度作为其参数。

在下面的演示中,这些函数用于绘制构成围绕 --angle 集的三角形的线条:

  • “斜边”(黄线)是从圆心到点位置的线。其长度等于圆的 --radius
  • “相邻”字段(红线)是沿 X 轴的圆心的一条线。其长度等于 --radius 乘以 --angle 的余弦值。
  • “相反”(蓝线)是沿着 Y 轴,从点中心起的一条直线。其长度等于 --radius 乘以 --angle 的正弦值。
  • --angletan() 函数用于绘制从该点指向 X 轴的绿线。

asin()acos()atan()atan2()

sin()cos()tan() 对应的 arc函数分别是 asin()acos()atan()。这些函数以相反的方向执行计算:它们将数值作为其参数,并返回相应的角度。

最后是 atan2(),它接受两个参数 AB。该函数会返回 X 轴正值与点 (B,A) 之间的角度。

示例

这些函数有多种使用场景。接下来是一小部分。

沿着中心点沿着圆形路径移动内容

在下面的演示中,这些点围绕一个中心点旋转。每个点在 X 轴和 Y 轴上平移,而不是绕着每个点的中心向外移动。X 轴和 Y 轴上的距离是通过分别考虑 --anglecos()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() 函数会计算从一个点到另一个点的相对角度。该函数接受两个逗号分隔值作为其参数:另一个点的 yx 位置(相对于起点 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() 颜色函数sl 组件。