在 jQuery 中获取元素 -moz-transform:rotate 值

Question

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

Answer 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'));

ETC...

Answer 2

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

因此，我在返回 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;
}

Answer 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

Answer 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();

Answer 5

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

为了使这种计算更容易，有一个名为 Sylvester 的 JavaScript 库，它是为了简单的矩阵计算而创建的，请尝试查看它以从矩阵值中获取旋转度数。

另外，如果你在 javascript 中编写一个旋转函数来将旋转角度转换为矩阵，它可能看起来像这样（这使用西尔维斯特进行最后的计算）：

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]
        ]);
    }
};

现在你真正要做的就是对该函数进行反向工程并你是金子:-)

Answer 6

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

Answer 7

我已经对这个工作代码进行了修改，以获得 3D 上的rotateX YZ 或用于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 + "°]");
}else
{
    $("#Result").html("Transform 3D [rotateX=" + mAngle.rotateX + "°|rotateY=" + mAngle.rotateY + "°|rotateZ=" + mAngle.rotateZ + "°]");
}

Answer 8

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

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

Answer 9

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

Answer 10

由于我经常需要将 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

从我的其他答案粘贴，希望这有帮助。

Answer 11

如果您愿意使用内联样式来进行此转换，那么您可以使用 jQuery 来获取样式标记的内容：

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