带有转换的IE9中定位元素错误：旋转

Question

I need to rotate a text vertically in my HTML5-application.

This works in all browsers except IE9 and lower (couldn't test it in IE10 yet):

.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;
}

In IE9 (no Quirksmode), the element is rotated but positioned wrong, it's displayed way too low. What am I doing wrong? The elements parent is position:relative btw.

Thanks!

SOLUTION

Sorry to solve my own question, but I had a mistake in giving transform-origin 3 values (which makes it a 3d-transform I suppose) which is not supported by IE9. Removing the last "0" solved the problem.

Answer 1

As supposed by @Spudley I post my solution here, so it maybe will help others with the same problem:

You must not use 3 values for IE <= 9 as those versions of IE do only support 2D-transformations, 3 values however seem to tell the browser it's an (unsupported) 3D-transform.

So this is wrong:

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

and this is right and working:

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

Hope it helps.