html - IE9 中错误定位的元素，转换为 : rotate

Question

我需要在我的 HTML5 应用程序中垂直旋转文本。

这适用于除 IE9 及更低版本之外的所有浏览器(无法在 IE10 中测试):

.badgeWrapper > h3{
    -webkit-transform: rotate(-90deg) translate(-100%, 0%);
    -webkit-transform-origin: 0 0 0;
    -moz-transform: rotate(-90deg) translate(-100%, 0%);
    -moz-transform-origin: 0 0 0;
    -ms-transform: rotate(-90deg) translate(-100%, 0%);
    -ms-transform-origin: 0 0 0;
    -o-transform: rotate(-90deg) translate(-100%, 0%);
    -o-transform-origin: 0 0 0;
    transform: rotate(-90deg) translate(-100%, 0%);
    transform-origin: 0 0 0;
    width: 140px;
    position: absolute;
}

在 IE9(无 Quirksmode)中，元素旋转但位置错误，显示太低。我究竟做错了什么？父元素是 position:relative btw.

谢谢!

解决方案

很抱歉解决我自己的问题，但我在给 transform-origin 3 值时犯了一个错误(我想这使它成为 3d-transform)，IE9 不支持。删除最后一个“0”解决了问题。

Answer 1

正如@Spudley 所说，我在这里发布了我的解决方案，所以它可能会帮助其他人解决同样的问题:

您不能为 IE <= 9 使用 3 个值，因为这些版本的 IE 只支持 2D 转换，但是 3 个值似乎告诉浏览器它是一个(不受支持的)3D 转换。

所以这是错误的:

-ms-transform: rotate(-90deg) translate(-100%, 0%);
-ms-transform-origin: 0 0 0;

这是正确且可行的:

-ms-transform: rotate(-90deg) translate(-100%, 0%);
-ms-transform-origin: 0 0;

希望对您有所帮助。