如何从style.transform矩阵值中获取正确的div旋转角度？

我完全懂你遇到的这个坑！当你直接从transform矩阵里提取值用普通反正切计算角度时，很容易因为象限问题得到错误的结果——就像你遇到的150°返回30°的情况，本质是三角函数的象限歧义导致的。

问题根源 #

CSS的transform: rotate(θ)对应的变换矩阵是matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)。如果你用Math.atan(b/a)计算角度（其中a是cosθ，b是sinθ），这个函数只会返回-90°到90°之间的值，而且无法区分角度所在的象限：

• 150°的cos值是-√3/2 ≈ -0.866，sin值是0.5
• 直接计算Math.atan(0.5 / -0.866)会得到-30°，如果你直接取正就变成了30°，完全偏离实际角度

正确解决方案 #

要准确获取旋转角度，你需要用Math.atan2(b, a)代替普通的Math.atan，它会根据a和b的正负判断象限，返回-180°到180°之间的正确弧度值，再转成角度并处理为0-360°的正角度即可。

下面是完整的实现代码：

function getExactRotationAngle(element) {
  const computedStyle = window.getComputedStyle(element);
  const transformProp = computedStyle.transform;

  // 如果元素没有旋转，返回0°
  if (!transformProp || transformProp === 'none') return 0;

  // 解析matrix或matrix3d的参数
  const matrixRegex = /matrix(3d)?\(([^)]+)\)/;
  const matchResult = transformProp.match(matrixRegex);
  if (!matchResult) return 0;

  const values = matchResult[2].split(',').map(val => parseFloat(val.trim()));
  let cosTheta, sinTheta;

  // 区分matrix和matrix3d的参数位置
  if (matchResult[1]) {
    // matrix3d的前两个值是cosθ和sinθ
    cosTheta = values[0];
    sinTheta = values[1];
  } else {
    // matrix的前两个值是cosθ和sinθ
    cosTheta = values[0];
    sinTheta = values[1];
  }

  // 计算弧度并转换为角度
  const radians = Math.atan2(sinTheta, cosTheta);
  let degrees = radians * (180 / Math.PI);

  // 将负角度转换为0-360°范围内的正角度
  if (degrees < 0) {
    degrees += 360;
  }

  // 处理浮点数精度问题（可选，根据需求调整）
  return Math.round(degrees * 100) / 100;
}

使用示例 #

const rotatedDiv = document.querySelector('.your-rotated-div');
const actualAngle = getExactRotationAngle(rotatedDiv);
console.log(actualAngle); // 当元素旋转150°时，会输出150（或接近150的精确值）

额外说明 #

• 浮点数精度：由于CSS计算矩阵值时可能存在微小的精度误差，你可以根据需求用Math.round或toFixed调整结果的小数位数。
• 兼容性：这个方法兼容所有支持CSS transform的现代浏览器，包括处理matrix3d的情况（比如元素同时有3D变换时）。

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