对于普通浏览器(包括 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 个依赖项,在我所有的测试中——包括,只是运行包含的测试文件——它实际上并没有旋转任何东西(没有错误,它只是什么都不做)
最佳答案
好吧,事实证明这并不简单……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:
)。- 解决方法:将定位应用于包装元素,然后旋转内部元素。这似乎工作正常(见上面的演示)
关于css - IE8 和其他所有内容之间的 CSS 旋转的一致来源?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17490216/