Question

使用transform:rotate(XXdeg);对普通浏览器（包括IE9 +，使用-moz-，-webkit-，-ms-前缀的变体，可以在CSS中进行跨浏览器文本轮换覆盖旧版本）。然后，对于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);

... e.g。 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旋转与原点上的其他浏览器匹配，而无需非常复杂的矩阵计算来旋转和转换以及另一个计算，即使用{{1}在旋转后偏移对象的数量} top:等......

似乎效果最佳的选项 - 最少代码，最少的非标准依赖关系 - 通过 louisremi branch of jquery.transform 获得left:。

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

应用这样的旋转：jquery.transform2d.js或动画旋转，如下所示：$('somejQuery').css('transform','rotate(90degs)');

该演示显示了迄今为止我遇到的一个限制（触摸木材）和Jquery Transform插件，用于简单旋转（除了需要jQuery）：

它会删除它旋转的元素上的任何定位（$('somejQuery').animate('transform','rotate(90degs)');，top:）。
- 解决方法：将定位应用于包装元素，然后旋转内部元素。这似乎工作正常（见上面的演示）

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

1 个答案: