不能在原生 CSS 中调用 sin()、cos() 或 tan()，浏览器尚未支持 CSS trig() 提案；唯一可行方案是用 JavaScript 计算 Math.sin()/Math.cos() 后写入 CSS 自定义属性，再通过 calc() 引用。
HTML/CSS 里根本没有 sin()、cos()、tan() 函数
直接回答核心问题：你不能在原生 CSS 中调用 sin()、cos() 或 tan()。CSS 的函数体系（如 calc()、hsl()、clamp()）不包含三角函数，@property 也不支持动态计算三角值。浏览器尚未实现 CSS trig() 函数提案（仍在草案阶段，无主流支持）。试图写 transform: rotate(calc(sin(45deg) * 10px)) 会直接报错或被忽略。
真正能用三角函数的地方只有 JavaScript + CSS 自定义属性
可行路径是：用 JS 计算 Math.sin()、Math.cos() 等结果，再写入 CSS 自定义属性（--x、--y），最后在 CSS 中通过 calc() 引用。这是目前最稳定、兼容性最好的方案。
常见使用场景包括：环形菜单定位、极坐标动画（如指针绕圆心旋转）、波浪滚动效果、倾斜角度驱动位移等。
-
Math.sin()和Math.cos()的参数单位是弧度，不是度数 —— 别忘了angleInRad = angleInDeg * Math.PI / 180 - CSS 自定义属性值默认是字符串，JS 赋值时需显式转为数字字符串（如
element.style.setProperty('--x', x.toFixed(4))），否则calc(var(--x) * 1px)可能失效 - 动画性能关键：避免每帧读取
getComputedStyle，只写不读；用requestAnimationFrame控制更新节奏
示例（环形排列 5 个子元素）：
立即学习“前端免费学习笔记（深入）”；
const radius = 200;
const items = document.querySelectorAll('.item');
items.forEach((el, i) => {
const angle = (i / items.length) * Math.PI * 2; // 弧度
const x = Math.cos(angle) * radius;
const y = Math.sin(angle) * radius;
el.style.setProperty('--x', x.toFixed(4));
el.style.setProperty('--y', y.toFixed(4));
});CSS 中：
.item {
position: absolute;
left: calc(50% + var(--x) * 1px);
top: calc(50% + var(--y) * 1px);
}用 CSS @property 声明类型后，仍不能触发三角运算
有人误以为声明 @property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; } 就能让 sin(var(--angle)) 生效 —— 实际上不行。@property 只影响 CSS 动画插值行为和类型校验，不扩展函数能力。所有 trig 函数仍不可用，浏览器会静默丢弃非法表达式。
容易踩的坑：
- 把
Math.sin(30)当作 30° 来用（实际是 30 弧度 ≈ 1718°，结果完全偏离） - 在
calc()中混用单位和无单位值，如calc(var(--x) * 10px)要求--x是纯数字，不能是"1.2px" - 在非 transform 属性中滥用三角值，比如
width: calc(var(--scale) * 100%)，但--scale是负数（cos(180°) = -1），导致宽度为负 —— 浏览器会 clamp 为 0，布局崩坏
Web Animations API 是更可控的替代方案
如果目标是角度驱动的平滑动画（比如钟表指针、雷达扫描线），直接用 element.animate() 配合 JS 计算关键帧，比硬塞进 CSS 更可靠。
- 避免 CSS 自定义属性在动画中频繁重写带来的 layout thrashing
- 可精确控制 easing（例如用
sin(t * π/2)实现 ease-in 曲线） - 支持动态更新时间轴，响应用户交互（如拖拽后继续按余弦减速）
关键点：三角函数本身不难，难的是单位转换、数值范围控制、以及 CSS 和 JS 边界处的隐式类型处理。漏掉一次 deg → rad 转换，或者忘了 toFixed() 截断浮点误差，都可能导致视觉跳变或定位偏移。
