2

可以使用普通浏览器的变体在 CSS 中获得跨浏览器文本旋转transform:rotate(XXdeg); （包括 IE9+，使用 with -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 个依赖项，并且在我的所有测试中——包括，只是运行包含的测试文件——它实际上并没有旋转任何东西（没有错误，它只是没有做任何事情）
4

1 回答 1

10

好吧，事实证明这并不简单...... 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:
    • 解决方法：将定位应用于包装元素，并旋转内部元素。这似乎工作正常（见上面的演示）
于 2013-07-05T15:42:54.480 回答