如何使用JavaScript获取CSS变换旋转度值

我使用这些代码通过JavaScript获得当前的旋转变换（CSS）

JavaScript函数：

function getCurrentRotation( elid ) {
  var el = document.getElementById(elid);
  var st = window.getComputedStyle(el, null);
  var tr = st.getPropertyValue("-webkit-transform") ||
       st.getPropertyValue("-moz-transform") ||
       st.getPropertyValue("-ms-transform") ||
       st.getPropertyValue("-o-transform") ||
       st.getPropertyValue("transform") ||
       "fail...";

  if( tr !== "none") {
    console.log('Matrix: ' + tr);

    var values = tr.split('(')[1];
      values = values.split(')')[0];
      values = values.split(',');
    var a = values[0];
    var b = values[1];
    var c = values[2];
    var d = values[3];

    var scale = Math.sqrt(a*a + b*b);

    // arc sin, convert from radians to degrees, round
    /** /
    var sin = b/scale;
    var angle = Math.round(Math.asin(sin) * (180/Math.PI));
    /*/
    var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    /**/

  } else {
    var angle = 0;
  }

  // works!
  console.log('Rotate: ' + angle + 'deg');
  $('#results').append('<p>Rotate: ' + angle + 'deg</p>');
}

函数getCurrentRotation（elid）{ var el=document.getElementById（elid）； var st=window.getComputedStyle（el，null）； var tr=st.getPropertyValue（“-webkit transform”）|| st.getPropertyValue（“-moz转换”）|| st.getPropertyValue（“-ms转换”）|| st.getPropertyValue（“-o-transform”）|| st.getPropertyValue（“转换”）|| “失败……”； 如果（tr！=“无”）{ console.log（'Matrix:'+tr）； var值=tr.split（'（'）[1]； values=values.split（'））[0]； values=values.split（'，'）； var a=数值[0]； var b=数值[1]； var c=数值[2]； var d=数值[3]； var scale=Math.sqrt（a*a+b*b）； //圆弧正弦，从弧度转换为度，圆形 /** / var sin=b/标度； 变量角度=数学圆（数学asin（sin）*（180/数学PI））； /*/ 变量角度=数学圆（数学atan2（b，a）*（180/数学PI））； /**/ }否则{ var角=0； } //工作！ 控制台日志（'旋转：'+角度+'度'）； $（“#结果”）。追加（“旋转：“+angle+”deg

”）； } 根据帖子，这是可行的，但是，对于超过180度的值，我得到负数，360度返回零。我需要能够正确返回180-360度的度值

这段代码不允许返回正确的度数翻转180度，我做错了什么

---

如果您查看演示，它将更有意义：。

在另一个SO问题中找到答案，如果结果弧度小于零，您必须添加（2*PI）

这一行：

var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));

需要替换为以下内容：

var radians = Math.atan2(b, a);
if ( radians < 0 ) {
  radians += (2 * Math.PI);
}
var angle = Math.round( radians * (180/Math.PI));

var radians=Math.atan2（b，a）；
if（弧度<0）{
弧度+=（2*Math.PI）；
}
变量角度=数学圆（弧度*（180/数学圆周率））；

我也需要类似的东西，并决定从最初的代码开始，做一些清理和改进；然后我对OP进行了修改，所以我现在想在这里分享它：

function getCurrentRotation(el){
  var st = window.getComputedStyle(el, null);
  var tm = st.getPropertyValue("-webkit-transform") ||
           st.getPropertyValue("-moz-transform") ||
           st.getPropertyValue("-ms-transform") ||
           st.getPropertyValue("-o-transform") ||
           st.getPropertyValue("transform") ||
           "none";
  if (tm != "none") {
    var values = tm.split('(')[1].split(')')[0].split(',');
    /*
    a = values[0];
    b = values[1];
    angle = Math.round(Math.atan2(b,a) * (180/Math.PI));
    */
    //return Math.round(Math.atan2(values[1],values[0]) * (180/Math.PI)); //this would return negative values the OP doesn't wants so it got commented and the next lines of code added
    var angle = Math.round(Math.atan2(values[1],values[0]) * (180/Math.PI));
    return (angle < 0 ? angle + 360 : angle); //adding 360 degrees here when angle < 0 is equivalent to adding (2 * Math.PI) radians before
  }
  return 0;
}

---

如果角度小于或等于0，您不能简单地将360添加到角度吗？是的，只是添加了一个带有更新代码的答案。我想这与我缺乏几何知识有关。在这里找到帮助：感谢分享您的努力！我真的很感激！

getCurrentRotation(document.getElementById("el_id"));