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

Question

我正在使用代码 found at CSS-Tricks 通过 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>');
}

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

我做错了什么这段代码不能让它返回正确的角度翻转 180 度？

如果您查看演示会更有意义：See the pen for a demo of this in action。

Answer 1

在另一个 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));

Answer 2

我也需要这样的东西，并决定从最初的代码开始，做一些清理和一些小的改进；然后我根据需要的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;
}

像这样使用它：

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