现代浏览器中sin()、cos()、tan()可在calc()中使用，但必须传带单位的角度值（如45deg），不能传纯数字或无单位变量；tan()在90deg处无定义，需用min()限制输入；atan2(y,x)可全象限计算角度。
现代浏览器中，sin()、cos()、tan() 等三角函数可以直接在 calc() 里用，但必须搭配 CSS 角度单位（如 deg）且不能脱离计算上下文——它们不接受纯数字输入，也不返回带单位值。
sin() 和 cos() 必须传角度，不能传弧度变量
常见错误是直接写 sin(0.5) 或 cos(var(--rad))，这会失效：浏览器只认 deg、rad、turn、grad 这类显式单位。即使你用 JS 设置了 --rad: 0.785;，CSS 仍把它当无单位数，sin(var(--rad)) 就算不出来。
- ✅ 正确写法：
sin(45deg)、cos(calc(var(--angle) * 1deg)) - ⚠️ 注意：
cos(0.785rad)合法，但0.785本身不是角度值，必须带rad单位 - ? 实际技巧：用
calc(var(--angle) * 1deg)把纯数字变量“转”成角度，再喂给sin()
tan() 在接近 90deg 时会爆掉，别硬刚边界值
tan(89.9deg) 浏览器可能返回一个极大值（比如 572），tan(90deg) 则直接算无效，对应属性会被忽略。这不是 bug，是数学本质——正切在 90° 处无定义。
- ? 避免：
tan(90deg)、tan(calc(var(--tilt) * 1deg))且--tilt可能 ≥90 - ✅ 安全做法：用
min()截断输入，例如tan(min(85deg, var(--tilt))) - ? 调试时看 computed styles：如果某属性没生效，检查 DevTools 里是否显示
invalid value
atan2() 是唯一能靠坐标算全象限角度的函数
想让一个箭头始终指向鼠标？别用 atan()，它只返回 -90°~90°，左半平面全错。必须用 atan2(y, x)，参数顺序是 Y 在前、X 在后。
- ✅ 正确：
transform: rotate(atan2(var(--dy), var(--dx)));（--dy和--dx是相对偏移） - ❌ 错误：
atan(calc(var(--dy) / var(--dx)))—— 丢象限，且除零会崩 - ⚠️ 注意：
atan2(0, 0)是未定义行为，JS 设置变量前应做兜底，比如--dx: max(1px, var(--raw-dx))
真正难的不是写对语法，而是把几何关系准确翻译成 CSS 表达式：角度单位要显式、输入范围要约束、坐标系原点要对齐——漏掉任一环，结果就飘了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
