如何用JavaScript计算CSS rotate属性的动态旋转角度（速度计场景）

不需要三角函数，用线性映射就能搞定，核心是把分值区间（300-900）对应到角度区间（-85deg到85deg），步骤如下：

计算逻辑 #

1. 边界限制：先把分值限制在300到900之间，低于300取300，高于900取900
2. 计算相对比例：算出当前分值在300-900区间内的占比：

   比例 = (当前分值 - 300) / (900 - 300)
   

3. 映射到角度区间：角度区间的总跨度是 85 - (-85) = 170deg，用比例乘以总跨度，再加上起始角度（-85deg）就是最终角度：

   最终角度 = -85 + (比例 * 170)
   

代码实现（JavaScript） #

function getSpeedometerAngle(score) {
  // 限制分值在300-900之间
  const clampedScore = Math.max(300, Math.min(900, score));
  // 计算比例
  const ratio = (clampedScore - 300) / 600;
  // 计算角度
  const angle = -85 + (ratio * 170);
  // 返回带单位的字符串，直接用于CSS
  return `${angle}deg`;
}

// 示例使用
console.log(getSpeedometerAngle(300)); // 输出 "-85deg"
console.log(getSpeedometerAngle(600)); // 输出 "0deg"（中间值）
console.log(getSpeedometerAngle(900)); // 输出 "85deg"
console.log(getSpeedometerAngle(100)); // 输出 "-85deg"
console.log(getSpeedometerAngle(1000)); // 输出 "85deg"

CSS应用示例 #

拿到计算后的角度后，直接给指针元素设置样式：

.speedometer-pointer {
  transform: rotate(/* 这里插入计算出的角度 */);
  /* 关键设置：旋转原点设为指针底部（速度计中心） */
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
}

这个方法是纯线性映射，没有复杂计算，刚好匹配你需要的范围要求，不会出错。

内容的提问来源于stack exchange，提问作者pranav