css - IE8 和其他所有内容之间的 CSS 旋转的一致来源？

Question

对于普通浏览器(包括 IE9+，使用 -moz-、-webkit-、-ms- 前缀以覆盖旧版本)。然后，对于 IE8 和 co(应该在 IE6+ 中工作，尽管 IE6 和 IE7 几乎不再是问题:IE8 仍然是一个问题)，使用这样的矩阵变换:

filter: progid:DXImageTransform.Microsoft.Matrix(
  M11=[ COSINE OF ANGLE ],
  M12=[ SINE OF ANGLE ],
  M21=[ -1 x SINE OF ANGLE ], 
  M22=[ COSINE OF ANGLE ],
sizingMethod='auto expand); 

...例如过滤器:progid:DXImageTransform.Microsoft.Matrix(M11=0.76604444, M12=0.64278761, M21=-0.64278761, M22=0.76604444,sizingMethod='auto expand');

---

问题是，这两种方法具有不同的变换原点，这意味着虽然它们具有相同的 Angular ，但旋转元素的位置因浏览器而异，并且如何变化取决于元素的 Angular 和大小，使得通过定位来固定它不是一项简单的任务。

这里有一个演示: http://jsbin.com/edudof/2/

在非 IE8 中，可以像这样设置变换原点 - transform-origin: 50% 50%;(指定默认值)。我找不到任何与 IE8 的过滤器矩阵变换等效的东西，并且我尝试设置非 IE 原点以匹配 IE 原点(我读过 - 尽管是在随机博客文章中 - 显然在左上角元素，但 transform-origin: top left; 偏离了)。

我不太关心转换原点是什么(尽管将所有内容都设置为 50% 50% 是最理想的)。优先考虑的是在浏览器中获得一致的结果。

---

我发现并尝试了另外两件事:

• 一篇很长的文章，描述了一种理论上的(未经测试的？)方法，可以用来编写在 Javascript 中执行此操作的代码。它需要手动定位以及两层额外的矩阵操作。 https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie
• javascript 库 css3Sandpaper .它有 3 个依赖项，在我所有的测试中——包括，只是运行包含的测试文件——它实际上并没有旋转任何东西(没有错误，它只是什么都不做)

Answer 1

好吧，事实证明这并不简单……Spudley 的评论证实了我的怀疑，值得将手动输入的 CSS 作为失败的原因注销。似乎没有简单的方法可以使 IE 旋转与其他浏览器在原点匹配，而无需非常复杂的矩阵计算来旋转和平移以及使用 top: 计算对象旋转后偏移量的另一项计算left:等等……

---

似乎效果最好的选项 - 最少的代码，最少的非标准依赖 - 是 jquery.transform2d.js通过 louisremi branch of jquery.transform .

这是一个示例演示，其中旋转位置在 IE7、IE8、IE9+ 和 Firefox、Chrome 等之间几乎是像素完美的 - http://jsbin.com/ejiqov/3 。

像这样应用旋转:$('somejQuery').css('transform','rotate(90degs)');或者对于动画旋转，像这样:$('somejQuery').animate('transform','rotate(90degs)');

该演示显示了到目前为止我遇到的一个限制(触摸木头)，使用 Jquery Transform 插件进行简单旋转(除了需要 jQuery):

• 它删除它旋转的元素上的任何定位( top: ， left: )。
  • 解决方法:将定位应用于包装元素，然后旋转内部元素。这似乎工作正常(见上面的演示)