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

等...

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

这是Twist功能的插件版本。此外，条件 if（矩阵！=='无'）对我不起作用。所以我添加了类型检查：

(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 4

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

现在你真正需要做的就是反转发动机功能而你是金色的： - ）

Answer 6

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

Answer 7

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

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

Answer 8

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

Answer 9

由于我经常需要将jQuery与TweenMax一起使用，并且因为TweenMax已经处理了各种类型的转换字符串的所有解析以及兼容性问题，所以我写了一个小的jquery插件here（更多的是结束可以直接访问这些值的gsap's：

$('#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 10

我已经完成了这个工作代码，以便在3D上获得rotateX Y Z，或者使用rotateZ进行2D变换。感谢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;]");
}

Answer 11

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

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

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

11 个答案: