IE8与其他一切之间CSS旋转的一致起源？

Question

这是可能的使用变化,以获得CSS跨浏览器的文本旋转transform:rotate(XXdeg); 进行正常的浏览器(INC.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); 

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

---

问题是,这两种方法具有不同的变换原点,这意味着虽然它们具有相同的角度,但旋转元素的位置在浏览器之间变化,并且它的变化方式取决于元素的角度和大小,从而使其固定定位不是一项简单的任务.

这是一个现场演示,说明了这一点: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通过jquery.transform的louisremi分支.

这是一个示例演示,其中旋转位置在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:).
  • 解决方法:将定位应用于包装元素,然后旋转内部元素.这似乎工作正常(见上面的演示)