如何用JavaScript获得CSS变换旋转值(以度为单位)

我正在使用代码 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度的值,我得到负数,360deg返回零.我需要能够正确地返回180-360度的度数值.

这个代码不能让它返回180度的正确度数,我做错了什么?

如果你观看演示会更有意义:See the pen for a demo of this in action.

解决方法

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

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...