$ .css('transform')返回错误的值旋转

时间:2012-10-15 14:02:23

标签: jquery css firefox

  

可能重复:
  Get element -moz-transform:rotate value in jQuery

Firefox 15 - Chrome:

$('#img2').css('transform');

return =>  "rotate(90deg)"

Firefox 16

$('#img2').css('transform');
return => matrix(0, 1, -1, 0, 0, 0);

知道如何在firefox 16中获得旋转值 什么是矩阵?

在Firebq中我得到:

element.style {
    height: auto;
    transform: rotate(90deg);
    width: auto;
}

1 个答案:

答案 0 :(得分:6)

矩阵是[a,b,c,d,tx,ty]形式的affine transformation。如果将css字符串解析为具有这些属性的对象(在示例中分别为[0,1,-1,0,0,0]),则可以通过执行以下操作来计算旋转角度:Math.atan2(matrix.b,matrix.a) * (180 / Math.PI);

这里有一篇关于css矩阵的好文章http://dev.opera.com/articles/view/understanding-the-css-transforms-matrix/ - 但我发现的最好的解释是Senocular的这个(尽管它的意思是关于Flash,基本的数学是相同的): http://www.senocular.com/flash/tutorials/transformmatrix/

rotate(deg)语法只是底层矩阵变换的简写。我不确定为什么FF接受一种格式,但报告另一种格式。

有关变换的更多信息:http://www.w3.org/TR/2012/WD-css3-transforms-20120911/