在jQuery中获取元素-moz-transform：旋转值答案

【问题标题】：Get element -moz-transform:rotate value in jQuery在jQuery中获取元素-moz-transform：旋转值
【发布时间】：2012-01-06 10:08:49
【问题描述】：

我有一个图层的 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")

结果是matrix(0.991445, 0.130526, -0.130526, 0.991445, 0px, 0px)，这并没有告诉我很多。我希望得到的是7.5。

【问题讨论】：

matrix() 正在显示转换数据，但您需要找出每个参数的作用并自己进行数学运算
谢谢。与此同时，我发现了什么是矩阵，当我改变旋转值时它会改变什么值 //matrix(1, 0, 0, 1, 0px, 0px) //rotation 0 deg 我仍然无法弄清楚如何获取旋转值矩阵(0.984808, 0.173648, -0.173648, 0.984808, 0px, 0px) //旋转10度矩阵(0.939693, 0.34202, -0.34202, 0.939693, 0px, 0px) //旋转20度
为什么不保留镜像值，例如在数据属性中？
如果您需要纯 JS 解决方案，请查看stackoverflow.com/a/54492696/1078556

标签： jquery css transform rotation

【解决方案1】：

这是我使用 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'));

等等……

【讨论】：

return 语句中的+= 运算符可以替换为+，因为赋值不会影响返回值。
它不适用于rotate3d 或rotateX 值？ jsfiddle.net/k35o1s27/1
请注意，如果元素不可见（在另一个具有 display:none 的元素内），则变换将始终返回值 none，并且此函数将返回旋转 0

【解决方案2】：

我在 Twist 的代码中发现了一个错误/功能：函数返回 negative 角度。

所以我在返回angle之前添加了一行简单的代码：

if(angle < 0) angle +=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;
}

【讨论】：

我今天获得了死灵法师徽章......并用你的错误修正更正了我的代码:) 感谢你注意到负角的可能性。
您应该将 if(angle < 0) 更改为 while(angle < 0)，以便继续处理小于 -360 的角度，直到它们变为正数。

【解决方案3】：

我的解决方案（使用 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

【讨论】：

感谢使它成为一个 jQuery 函数，使其简洁并显示使用示例！谢谢。也用于返回弧度和度数的浮点数。出于这些原因，这是我将使用的解决方案。

【解决方案4】：

这里是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();

【讨论】：

【解决方案5】：

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

为了使此类计算更容易，我们创建了一个名为 Sylvester 的 JavaScript 库，该库是为了便于矩阵计算而创建的，请尝试查看该库以从矩阵值中获取旋转度数。

此外，如果您在 javascript 中编写旋转函数以将旋转度数转换为矩阵，它可能看起来像这样（最后一次计算使用 sylvester）：

var Transform = {
    rotate: function(deg) {
        var rad = parseFloat(deg) * (Math.PI/180),
            cos_theta = Math.cos(rad),
            sin_theta = Math.sin(rad);

        var a = cos_theta,
            b = sin_theta,
            c = -sin_theta,
            d = cos_theta;

        return $M([
          [a, c, 0],
          [b, d, 0],
          [0, 0, 1]
        ]);
    }
};

现在您真正需要做的就是对该功能进行逆向工程，然后您就可以了 :-)

【讨论】：

我会接受你的回答，即使我找到了可以帮助我的脚本。
如果我需要某个变换矩阵的rotateX、rotateY和rotateZ怎么办？你能提供一个基本的例子吗？

【解决方案6】：

这个脚本很有帮助 https://github.com/zachstronaut/jquery-css-transform

【讨论】：

比接受的更好的解决方案。 +1。当以其他方式设置时，这个东西甚至可以检索度数。

【解决方案7】：

我对这个工作代码做了一些修改，以在 3D 上获取 rotateX Y Z ，或为 2D 变换获取 rotateZ 。感谢 mihn 提供的基本代码，我几乎没有用实际的 jquery 2.2.3 更新。我目前将此解决方案用于我自己的项目。

https://jsfiddle.net/bragon95/49a4h6e9/

    //
//Thanks: Adapted on base code from mihn http://stackoverflow.com/a/20371725
//

function getcsstransform(obj)
{
    var isIE = /(MSIE|Trident\/|Edge\/)/i.test(navigator.userAgent);

  var TType="undefined",
        rotateX = 0,
        rotateY = 0,
      rotateZ = 0;

  var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform") ||
    obj.css("-ms-transform") ||
    obj.css("-o-transform") ||
    obj.css("transform");
  if (matrix!==undefined && matrix !== 'none')
  {
        // if matrix is 2d matrix
    TType="2D";
    if (matrix.indexOf('matrix(') >= 0)
    {
      var values = matrix.split('(')[1].split(')')[0];
      if (isIE)  //case IE
      {
        angle = parseFloat(values.replace('deg', STR_EMPTY));
      }else
      {
        values = values.split(',');
        var a = values[0];
        var b = values[1];
        var rotateZ = Math.round(Math.atan2(b, a) * (180 / Math.PI));
      }
    }else
    {
      // matrix is matrix3d
      TType="3D";
      var values = matrix.split('(')[1].split(')')[0].split(',');
      var sinB = parseFloat(values[8]);
      var b = Math.round(Math.asin(sinB) * 180 / Math.PI);
      var cosB = Math.cos(b * Math.PI / 180);
      var matrixVal10 = parseFloat(values[9]);
      var a = Math.round(Math.asin(-matrixVal10 / cosB) * 180 / Math.PI);
      var matrixVal1 = parseFloat(values[0]);
      var c = Math.round(Math.acos(matrixVal1 / cosB) * 180 / Math.PI);
      rotateX = a;
      rotateY = b;
      rotateZ = c;
    }
  }

    return  { TType: TType, rotateX: rotateX,  rotateY: rotateY,  rotateZ: rotateZ };
};

mAngle = getcsstransform($("#Objet3D"));
if (mAngle.TType=="2D")
{
    $("#Result").html("Transform 2D [rotateZ=" + mAngle.rotateZ + "&deg;]");
}else
{
    $("#Result").html("Transform 3D [rotateX=" + mAngle.rotateX + "&deg;|rotateY=" + mAngle.rotateY + "&deg;|rotateZ=" + mAngle.rotateZ + "&deg;]");
}

【讨论】：

请不要添加“谢谢”作为答案。在网站上投入一些时间，您将获得足够的privileges 来为您喜欢的答案投票，这是 Stack Overflow 表达谢谢的方式。

【解决方案8】：

如果您按照您描述的方式执行此操作，那么任何 this 都是您实际修改对象变换的唯一位置，那么由于您的浏览器不能同时是所有 4 种浏览器，一些前缀值您分配的仍然与您分配的完全相同。所以例如如果你使用 webkit，那么this.css('-o-transform') 仍然会返回'rotate(7.5deg)'，所以只需将它与/rotate\((.*)deg\)/ 匹配即可。

这对我来说很好用：我总是分配 5 种 CSS 样式，并回读所有 5 种样式，希望其中至少有一种不会受到影响。我不确定如果样式是在 CSS（而不是 JS）中设置的，这是否有效。

【讨论】：

【解决方案9】：

您也可以将var angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); 替换为var angle = Math.round(Math.acos(a) * (180/Math.PI));

【讨论】：

【解决方案10】：

由于我经常需要将 jQuery 与 TweenMax 一起使用，并且由于 TweenMax 已经处理了各种类型的转换字符串的所有解析以及兼容性问题，所以我编写了一个小型 jquery 插件here（更多的是总结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

粘贴我的其他答案，希望对您有所帮助。

【讨论】：

【解决方案11】：

如果您愿意为这种转换使用内联样式，那么您可以使用 jQuery 来获取样式标签的内容：

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

【讨论】：