js设置页面标题 - 获取元素-moz-transform:在jQuery中旋转值



js获取网页标题 (8)

我有一个图层的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获得curent旋转值?

我试过这个

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

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


Answer #1

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 #2

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

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

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


Answer #4

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

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

Answer #5

我已经完成了这个工作代码,以便在3D上获得rotateX YZ,或者使用rotateZ进行2D变换。 感谢mihn的基本代码,我几乎没有用实际的jquery 2.2.3更新。 我目前将此解决方案用于我自己的项目。

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

    //
//Thanks: Adapted on base code from mihn http://.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 #6

由于我经常需要将jQuery与TweenMax一起使用,并且因为TweenMax已经处理了各种类型的转换字符串的所有解析以及兼容性问题,所以我here写了一个小的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 #7

这是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 #8

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

等等...





rotation