Get元素-moz转换：在jQuery中旋转值

我有一个层的CSS样式：

.element {
    -webkit-transform: rotate(7.5deg);    
     -moz-transform: rotate(7.5deg);    
      -ms-transform: rotate(7.5deg);    
       -o-transform: rotate(7.5deg);   
          transform: rotate(7.5deg);
}

有没有办法通过jQuery获得当前的旋转值

我试过这个

$('.element').css("-moz-transform")

---

结果是

矩阵（0.991445，0.130526，-0.130526，0.991445，0px，0px）

这并没有告诉我很多。我希望得到的是

7.5

CSS Transform属性将始终返回一个矩阵值，因为旋转、倾斜、缩放等只是简化操作，不必每次都计算矩阵值，但矩阵是由浏览器计算并作为矩阵应用的，完成后，如果不重新计算矩阵，它就不能返回按角度旋转的度数

为了简化此类计算，有一个名为javascript的库，它是为了简化矩阵计算而创建的，请尝试查看该库，从矩阵值中获取旋转度

此外，如果要在javascript中编写旋转函数以将旋转度转换为矩阵，可能会出现如下情况（最后一次计算使用sylvester）：

---

现在，您真正需要做的就是反向引擎的功能和您的黄金：-）

这个脚本是非常有用的

---

以下是我使用jQuery的解决方案

这将返回与应用于任何HTML元素的旋转相对应的数值

function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return (angle < 0) ? angle + 360 : angle;
}

angle1 = getRotationDegrees($('#myDiv'));
angle2 = getRotationDegrees($('.mySpan a:last-child'));

函数getRotationDegrees（obj）{ 变量矩阵=obj.css（“-webkit transform”）|| css（“-moz转换”）|| 对象css（“-ms转换”）|| 对象css（“-o-transform”）|| 对象css（“转换”）； 如果（矩阵！=“无”）{ var values=matrix.split（“（”）[1]。split（“）”）[0]。split（“，”）； var a=数值[0]； var b=数值[1]； 变量角度=数学圆（数学atan2（b，a）*（180/数学PI））； }else{var angle=0；} 返回（角度<0）？角度+360：角度； } 角度1=获取旋转度（$（'#myDiv'））； angle2=getRotationDegrees（$（'.mySpan a:最后一个子项'）；

---

等等。

这里是Twist函数的插件版本。另外，条件if（matrix！==“none”）对我不起作用。因此，我添加了类型检查：

(function ($) {
    $.fn.rotationDegrees = function () {
         var matrix = this.css("-webkit-transform") ||
    this.css("-moz-transform")    ||
    this.css("-ms-transform")     ||
    this.css("-o-transform")      ||
    this.css("transform");
    if(typeof matrix === 'string' && matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return angle;
   };
}(jQuery));

使用方法如下：

var rotation = $('img').rotationDegrees();

---

如果按照您描述的方式执行此操作，这是您实际修改对象变换的唯一位置，那么由于您的浏览器不能同时是所有4种浏览器，因此您指定的某些前缀值仍然与您指定的值完全相同。 例如，如果您使用webkit，那么

this.css（'-o-transform'）

仍将返回

'rotate（7.5deg）

，因此只需将其与

/rotate\（.*）deg\/

匹配即可

---

这对我来说效果很好：我总是指定5种css样式，然后读回所有5种样式，希望其中至少有一种样式不会被触动。如果样式是在CSS中设置的（而不是在JS中），我不确定这是否有效。

我在Twist的代码中发现了一个bug/特性：函数返回负角度

因此，在返回

角度之前，我添加了一行简单的代码：

if(angle < 0) angle +=360;

如果（角度<0）角度+=360；

结果将是：

function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }

    if(angle < 0) angle +=360;
    return angle;
}

函数getRotationDegrees（obj）{
变量矩阵=obj.css（“-webkit transform”）||
css（“-moz转换”）||
对象css（“-ms转换”）||
对象css（“-o-transform”）||
对象css（“转换”）；
如果（矩阵！=“无”）{
var values=matrix.split（“（”）[1]。split（“）”）[0]。split（“，”）；
var a=数值[0]；
var b=数值[1]；
变量角度=数学圆（数学atan2（b，a）*（180/数学PI））；
}else{var angle=0；}
如果（角度<0）角度+=360；
返回角；
}
您还可以替换
var angle=Math.round（Math.atan2（b，a）*（180/Math.PI））至
var角度=数学圆整（数学acos（a）*（180/数学PI））
由于我经常需要将jQuery与TweenMax一起使用，而且TweenMax已经处理了各种类型转换字符串的所有解析以及兼容性问题，因此我编写了一个小型jQuery插件（更多的是gsap的总结），可以直接访问这些值，如下所示：

$('#ele').transform('rotationX') // returns 0
$('#ele').transform('x')         // returns value of translate-x

可以获取/设置的属性列表及其初始属性：

perspective: 0
rotation: 0
rotationX: 0
rotationY: 0
scaleX: 1
scaleY: 1
scaleZ: 1
skewX: 0
skewY: 0
x: 0
y: 0
z: 0
zOrigin: 0

粘贴我的其他答案，希望这有帮助。
我的解决方案（使用jQuery）：

$.fn.rotationInfo = function() {
    var el = $(this),
        tr = el.css("-webkit-transform") || el.css("-moz-transform") || el.css("-ms-transform") || el.css("-o-transform") || '',
        info = {rad: 0, deg: 0};
    if (tr = tr.match('matrix\\((.*)\\)')) {
        tr = tr[1].split(',');
        if(typeof tr[0] != 'undefined' && typeof tr[1] != 'undefined') {
            info.rad = Math.atan2(tr[1], tr[0]);
            info.deg = parseFloat((info.rad * 180 / Math.PI).toFixed(1));
        }
    }
    return info;
};

$(element).rotationInfo(); // {deg: 7.5, rad: 0.13089969389957515}
$(element).rotationInfo().deg; // 7.5

用法：

$.fn.rotationInfo = function() {
    var el = $(this),
        tr = el.css("-webkit-transform") || el.css("-moz-transform") || el.css("-ms-transform") || el.css("-o-transform") || '',
        info = {rad: 0, deg: 0};
    if (tr = tr.match('matrix\\((.*)\\)')) {
        tr = tr[1].split(',');
        if(typeof tr[0] != 'undefined' && typeof tr[1] != 'undefined') {
            info.rad = Math.atan2(tr[1], tr[0]);
            info.deg = parseFloat((info.rad * 180 / Math.PI).toFixed(1));
        }
    }
    return info;
};

$(element).rotationInfo(); // {deg: 7.5, rad: 0.13089969389957515}
$(element).rotationInfo().deg; // 7.5

我对这个工作代码进行了修改，以在3D上获得rotateX Y Z，或在2D变换中获得rotateZ。感谢mihn提供的基本代码，我几乎没有用实际的jQuery2.2.3更新这些代码。
我目前在自己的项目中使用此解决方案


如果您愿意仅为该转换使用内嵌样式，则可以使用jQuery获取样式标记的内容：

parseInt($(  /*TODO*/  ).attr('style').split('rotate(')[1].split('deg)')[0]);

matrix（）
正在显示变换数据，但您需要了解每个参数的作用，并自行计算X。同时我发现了什么是矩阵，当我改变旋转值时它会改变什么值//矩阵（1，0，0，1，0px，0px）//旋转0度我仍然不知道如何得到旋转值矩阵（0.984808，0.173648，-0.173648，0.984808，0px，0px）//旋转10度矩阵（0.939693,0.34202，-0.34202,0.939693,0px,0px）//rotation 20 Deg为什么不将值镜像（例如在数据属性中）？如果您需要纯JS解决方案，请看一看，即使我找到了可以帮助我的脚本，我也会接受您的答案。如果我需要某个变换矩阵中的rotateX、rotateY和rotateZ呢？您能提供一个基本示例吗？比接受。+1.当设置为另一种方式时，这个东西甚至可以检索角度。我今天获得了亡灵巫师徽章…并用您的错误修正更正了我的代码：）感谢您注意到负角度的可能性。您应该将
如果（角度<0）
更改为
而（角度<0）
，使角度小于
-360<