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

问题描述

Firefox 15-Chrome:

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

return =>  "rotate(90deg)"

Firefox 16

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

任何想法如何在firefox 16中获得旋转值什么是矩阵?

Any idea how to get rotate value in firefox 16What is matrix ?

在Firebq中，我得到:

In Firebq i get:

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

推荐答案

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

A matrix is an affine transformation in the form [a,b,c,d,tx,ty]. If you parse the css string into an object with those properties (respectively [0,1,-1,0,0,0] in your example), then you can calculate the angle of rotation in degrees by doing: 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/

There's a good article on the css matrix here http://dev.opera.com/articles/view/understanding-the-css-transforms-matrix/ - but still the best explanation I've found is this one by Senocular (even though it's meant to be about Flash, the basic math is the same): http://www.senocular.com/flash/tutorials/transformmatrix/

rotate(deg)语法只是基础矩阵转换的简写.我不确定FF为什么接受一种格式，而报告另一种格式.

The rotate(deg) syntax is just a shorthand for the underlying matrix transform. I'm not sure why FF accepts one format, but reports another.

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

More on transforms: http://www.w3.org/TR/2012/WD-css3-transforms-20120911/

这篇关于$ .css('transform')返回错误的值旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！