atan2() 不是 CSS 函数，浏览器不支持；需用 JavaScript 调用 Math.atan2() 计算角度并注入 CSS，注意 y 差取反及弧度转角度，CSS calc() 无法替代。
atan2() 不是 CSS 函数，浏览器目前不支持
直接在 CSS 里写 atan2() 会无效——它不是 CSS 标准函数，所有主流浏览器（Chrome、Firefox、Safari）都尚未实现 atan2()，CSS Values and Units Level 4 规范虽已提案，但处于 Editor’s Draft 阶段，无实际支持。
如果你在 DevTools 里写了 transform: rotate(atan2(10, 5));，CSS 解析器会直接丢弃该声明，控制台也不会报错，只会静默失效。
替代方案：用 JavaScript 计算角度再注入 CSS
真实可行的做法是：用 JS 读取两点坐标 → 调用原生 Math.atan2(yDiff, xDiff) → 转为角度（deg）→ 写入元素的 style.transform 或自定义属性。
-
Math.atan2(y2 - y1, x2 - x1)返回的是弧度，需乘以180 / Math.PI转为角度 - 注意：CSS 的
rotate()逆时针为正，而屏幕坐标系中 y 向下增长，所以若 y 轴方向与数学坐标系一致（如 SVG 或 canvas），可直接用；若基于页面像素（getBoundingClientRect()），y 差要取反才能匹配视觉旋转方向 - 推荐写成函数封装，避免每次重复计算：
function angleBetween(p1, p2) {
const dy = p2.y - p1.y;
const dx = p2.x - p1.x;
return (Math.atan2(-dy, dx) * 180 / Math.PI + 360) % 360; // 归一化到 [0, 360)
}用 CSS 自定义属性 + calc() 无法动态计算 atan2
有人尝试把 dx 和 dy 存进 --dx、--dy，再在 CSS 里写 rotate: calc(atan2(var(--dy), var(--dx))); —— 这行不通。
立即学习“前端免费学习笔记（深入）”；
-
calc()只支持加减乘除、括号和基础单位运算，不支持三角函数 - 自定义属性值是字符串，CSS 引擎不会把它当数值传给 JS 引擎去算
atan2 - 即使未来支持，
atan2()也要求两个参数都是<number>类型，不能是带单位的值（如10px）
真需要纯 CSS 动态角度？只能靠有限预设或 Web Components
如果场景严格禁止 JS（极少见），目前没有可靠办法。可行折中包括：
- 用
@property声明受控数字变量 +keyframes预设几组典型角度（如 0°/45°/90°/135°），配合媒体查询或类名切换 - 用 Web Component 封装逻辑，在
connectedCallback中计算并设置内联样式，对外暴露坐标属性 - 改用 SVG：
<line>本身不旋转，但可用transform="rotate(...)"+ JS 绑定，且 SVG 坐标系更接近数学习惯
真正容易被忽略的一点：角度归一化和方向对齐比公式本身更易出错。比如忘了翻转 y 差，会导致箭头朝反方向偏转 180°，但看起来“好像有点斜”，排查时容易绕远。
