【问题标题】:$.css('transform') return wrong value rotate [duplicate]$.css('transform') 返回错误值旋转 [重复]
【发布时间】:2012-10-05 12:36:32
【问题描述】:

可能重复:
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;
}

【问题讨论】:

  • Firefox 15 在这里返回与 Firefox 16 相同的东西......两者似乎都返回了使用的转换值,而 Chrome 则返回了计算出来的值。哪一个是正确的规范仍然悬而未决。

标签: jquery css firefox


【解决方案1】:

矩阵是affine transformation,形式为[a,b,c,d,tx,ty]。如果您将 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 的,但基本数学是相同的):@987654323 @

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

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

【讨论】:

  • @Userpassword 这不是我的来源,但它是另一个有用的链接。
  • 好的,我尝试制作适用于 chrome 和 firefox15/16 的 jqueyr 函数
  • 哦,是的。那时可能最好删除。
  • 好的 - 你的问题,当然是你的特权。
猜你喜欢
  • 2020-07-23
  • 2014-01-04
  • 1970-01-01
  • 1970-01-01
  • 2011-10-28
  • 2016-01-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多