How to rotate and translate using CSS in IE8?

Question

We've added some new fancy css to our page that uses transform rules, however we need to keep compatibility with IE8 and those rules don't work there. All we did was rotate and translate a few elements and I managed to do the rotation in IE8 using this code:

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476)";

However I have no clue how to do the translation part. I tried to add third column to the matrix and see if it'll work, but no translation was happening. I tried both with and without px, but the result was the same. I also tried to adding a third row (0,0,1), but that didn't work either.

I know there are workaround libraries for this, but it would honestly be overkill. I just need to add IE8 specific translation to what I already have.

Answer 1

I haven't figured out how (or if I can) do the translation alongside the rotation using -ms-filter, but I managed to achieve my goal using good old margin.

At first I thought that I can simply use the \9 hack to target IE8, but unfortunately it not only affects IE8 and below, but also IE9 and IE 10.

During tests I also discovered that -ms-filter is messing with IE9, so in the end I added the IE8 specific css using conditional comments:

<!--[if lt IE 9]>
<style>
    .something{
        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476)";
        margin-left:-40px
        margin-top:-40px
    }
</style>
<![endif]-->