CSS 中的三角函数

使用集合保持井井有条 根据您的偏好保存内容并进行分类。

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

Bramus

三角函数

在 CSS 中，可以编写 数学表达式。 基础是用于进行计算的 calc() 函数，但您很可能也听说过 min()、max() 和 clamp()。

加入这些函数的是三角函数 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2()。 这些函数在 CSS 值和单位模块级别 4 中定义，并且在所有浏览器中都可用。

sin()、cos() 和 tan()

核心的三个三角函数是

• cos()：返回角度的余弦值，该值介于 -1 和 1 之间。
• sin()：返回角度的正弦值，该值介于 -1 和 1 之间。
• tan()：返回角度的正切值，该值介于 −∞ 和 +∞ 之间。

与它们的 JavaScript counterparts 不同，这些函数接受角度和弧度作为其参数。

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

• “斜边”（黄线）是从圆心到点位置的线。 其长度等于圆的 --radius。
• “邻边”（红线）是从圆心沿 X 轴的线。 其长度等于 --radius 乘以 --angle 的余弦值。
• “对边”（蓝线）是从点中心沿 Y 轴的线。 其长度等于 --radius 乘以 --angle 的正弦值。
• --angle 的 tan() 函数用于绘制从点到 X 轴的绿线。

asin()、acos()、atan() 和 atan2()

sin()、cos() 和 tan() 的反或反向对应项分别是 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 的这个 动画莫比乌斯带 中演示的那样，cos() 和 sin() 的用途不仅仅是平移。 在这里，它们的结果用于操纵 hsl() 颜色函数的 s 和 l 组件。