帶有轉換的IE9中定位元素錯誤：旋轉

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。

謝謝！

解

很抱歉解決了我自己的問題，但是我給了IE9不支持的變換原點3個值（我想應該是3d變換）時出錯了。 刪除最后一個“ 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;

希望能幫助到你。