Featured image of post CSS 三角函数：样式表中的数学Featured image of post CSS 三角函数：样式表中的数学
CSS

CSS 三角函数：样式表中的数学

掌握 CSS 三角函数（sin、cos、tan、atan2、asin、acos），用于纯 CSS 中的波浪图案、圆形布局、动画曲线和程序设计。

  1. 首页
  2. Webs
  3. CSS 三角函数：样式表中的数学

CSS 已经从一种简单的样式语言发展成为一种强大的计算引擎。 CSS 值和单位模块级别 4 中引入的三角函数（在 Chrome 111+、Firefox 108+ 和 Safari 15.4+ 中发布）标志着范式转变。开发人员现在可以直接在样式表中执行几何计算，无需预处理器或 JavaScript。

函数参考和语法

CSS 中现在提供了六个三角函数：

功能输入输出描述
占位符_0<angle> 或 <number><number> [-1, 1]<number>角度的正弦
占位符_0<angle> 或 <number><number> [-1, 1]<number>角度的余弦
占位符_0<angle> 或 <number>占位符_3角度的正切
占位符_0<number>、<number>占位符_3y/x 的反正切（完整 360°）
占位符_0<number> [-1, 1]<number> 占位符_2反正弦
占位符_0<number> [-1, 1]<number> 占位符_2反余弦

角度单位包括 deg、rad、grad 和 turn。常见的陷阱包括忘记单位、atan2 中除以零，以及 asin/acos 输入位于 [-1, 1] 之外的域错误。

波形和振荡

sin() 和 cos() 函数擅长创建波浪效果。这是一个纯 CSS 波浪动画：

@property --phase {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes phase-cycle {
  to { --phase: 360deg; }
}

.wave {
  animation: phase-cycle 2s linear infinite;
  transform: translateY(calc(sin(var(--phase)) * 20px));
}

[-1, 1] 输出范围通过 calc() 映射到像素值。多个元素上交错的 animation-delay 值会产生连锁反应。

圆形和径向布局

核心公式 x = cx + r * cos(angle) 和 y = cy + r * sin(angle) 无需 JavaScript 即可启用圆形布局：

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.dot {
  --x: calc(cos(var(--angle)) * 100px);
  --y: calc(sin(var(--angle)) * 100px);
  transform: translate(var(--x), var(--y));
}

与用于迭代角度的 @property 相结合，该技术支持径向菜单、圆环图、轨道动画，甚至是半径随角度变化的螺旋布局。

动画曲线和缓动

三角函数产生超出标准 cubic-bezier 的缓动曲线：

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(abs(sin(3.14 * var(--t))) * -30px)); }
}

The ease-in-out-sine curve equals sin((t * pi) / 2).指数衰减乘以 sin() 会产生自然弹簧和弹性动画。 tan() 函数创建基于渐近线的效果——物体接近消失点。

具有自定义属性的程序设计

将三角函数与 @property 组合可解锁程序生成：

@property --seed {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.hero-bg {
  background: conic-gradient(
    from calc(sin(var(--seed)) * 1turn),
    #667eea, #764ba2,
    calc(cos(var(--seed)) * 1turn), #667eea
  );
  clip-path: polygon(
    calc(cos(var(--seed)) * 100%) 0%,
    100% calc(sin(var(--seed)) * 100%),
    50% 100%, 0% 50%
  );
}

更改 --seed 值会生成完全不同的模式，使每个页面加载在视觉上都是唯一的。

浏览器支持和实际使用

特色铬火狐野生动物园
正弦/余弦/正切111+108+15.4+
atan2/asin/acos111+108+15.4+

使用 @supports (sin(0)) 进行特征检测。对于实际应用程序，请考虑仪表板仪表、通过 atan2 避免视口边缘的工具提示定位以及数学可视化。始终通过禁用非必要的动画来尊重 prefers-reduced-motion。

结论

CSS 三角函数开启了样式表功能的新维度。通过几何思考并将三角函数与自定义属性相结合，开发人员可以创建复杂的布局、动画和程序设计，而这在以前如果没有 JavaScript 是不可能实现的。 CSS 的未来是数学的。

©2022 - 2026 Commentary of Takao