CSS 中的三角函数

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

在 CSS 中,您可以编写数学表达式。基础是用于执行计算的 calc() 函数,但您可能还听说过 min()max()clamp()

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

浏览器支持

  • Chrome:111.
  • Edge:111.
  • Firefox:108.
  • Safari:15.4。

来源

sin()cos()tan()

三种核心三角函数如下:

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

与 JavaScript 函数不同,这些函数接受角度和弧度作为参数。

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

  • “斜边”(黄色线条)是从圆心到圆点位置的线条。其长度等于圆形的 --radius
  • “相邻”(红线)是从圆心沿 X 轴延伸的线。其长度等于 --radius 乘以 --angle 的余弦。
  • “对立”(蓝线)是从圆点中心沿 Y 轴绘制的线条。其长度等于 --radius 乘以 --angle 的正弦。
  • --angletan() 函数用于绘制从圆点向 X 轴的绿色线条。

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

sin()cos()tan()对应项分别为 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() 函数用于计算一个点相对于另一个点的相对角度。该函数接受两个以英文逗号分隔的值作为参数:相对于位于原点 0,0 的另一个点的 yx 位置。

有了计算值,您就可以使用各个转换属性旋转元素,使其彼此相对。

在以下示例中,这些框会旋转,以便朝向鼠标的位置。鼠标位置会通过 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() 颜色函数sl 组件。