IE8和其他所有东西之间CSS旋转的一致性来源？

可以使用

transform:rotate（XXdeg）上的变体在CSS中实现跨浏览器文本旋转适用于普通浏览器（包括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'）


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

下面是一个演示：

在非IE8中，可以像这样设置变换原点-
变换原点：50%50%（指定默认值）。我找不到IE8的过滤矩阵变换的任何等价物，我尝试将非IE原点设置为与IE原点匹配（虽然我在随机的博客文章中读到了IE原点，但它显然位于元素的左上角，但
变换原点：左上角；
距离太远）

我不太在意变换原点是什么（尽管将所有内容设置为50%将是理想的）。优先考虑的是跨浏览器获得一致的结果


我还发现并尝试了两件事：


一篇很长的文章描述了一种理论上的（未经测试的？）方法，该方法可用于在Javascript中进行编码。它需要手动定位以及两层额外的矩阵操作
javascript库。它有3个依赖项，在我所有的测试中——包括运行包含的测试文件——它实际上不旋转任何东西（没有错误，它只是不做任何事情）
事实证明，这并不简单。。。Spudley的评论证实了我的怀疑，手动输入的CSS作为一个失败的原因，值得一笔勾销。如果没有非常复杂的旋转和平移矩阵计算，以及使用
top:
left:
等计算对象旋转后的偏移量，似乎没有简单的方法可以使IE旋转与原始版本中的其他浏览器匹配


通过的
jquery.transform2d.js
似乎是最有效的选项——代码最少，非标准依赖项最少

下面是一个示例演示，其中IE7、IE8、IE9+和Firefox、Chrome等之间的旋转位置几乎是像素级的

像这样应用旋转：
$（'somejQuery'）.css（'transform'，'rotate（90degs）'）
或对于动画旋转，如下所示：
$（'somejQuery'）。动画（'transform'，'rotate（90degs）'）

该演示展示了迄今为止我在Jquery转换插件中遇到的一个限制（touch wood），该插件用于简单旋转（不需要Jquery）：


它会删除它旋转的元素上的任何位置（
顶部：
，
左侧：
）。

解决方法：将定位应用于包装器元素，并旋转内部元素。这似乎很好（见上面的演示）

查看您的cssSandpaper代码会很有趣，因为该库工作得非常好，坦率地说，它是以跨浏览器（IE8）兼容的方式进行旋转的唯一明智的方法。在纯CSS中工作是可能的，但这需要大量的工作，而且往往非常脆弱（例如，如果你想更改布局，哪怕只是一点点，通常都会导致更多的工作）。谢谢你的评论-对我来说不起作用的代码只是与cssSandpaper.js v.1.5捆绑在一起的
rotateTest.html
。我目前正在测试aka
jquery.transform2d.js
，它看起来更简单，依赖性更少，您以前遇到过吗？我没有看到像cssSandpaperNo那样经常提到它，我没有尝试过jquery转换，但如果它能工作，那就试试吧。任何能让你不必编写IE过滤代码的东西都是好的。问题是，如果您试图用纯CSS来实现它。那些矩阵过滤器绝对是个婊子。谢谢你。如果我可以多次向上投票，我会：）让它围绕50%的原点旋转的计算并不复杂，谢天谢地，但是让IE8像其他浏览器一样围绕左上角的坐标旋转是一个非常烦人的过程。jQuery插件在第一种情况下运行得非常好，但我发现在某些情况下它只需简单地应用：el.style.marginLeft=-（el.offsetWidth/2）+（el.clientWidth/2）+“px”；el.style.marginTop=-（el.offsetHeight/2）+（el.clientHeight/2）+“px”；将转换应用于转换后的元素。