How to rotate and translate using CSS in IE8?


Tags: css,internet-explorer,internet-explorer-8

Problem :

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.



Solution :

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]-->

    CSS Howto..

    how to get value from this html date-ranger?

    How to set p margin for a section

    CSS selector: how to select non-element sibling node?

    same button for show/hide in jquery

    How to add php to wordpress form

    How to test a web designer on css layouts?

    How to Display a DIV with 'fixed' and 'inline-block' Added to its CSS Properties

    How to make text wrap when resizing in a inline div, without the div moving onto a new line first?

    How to create a horizontal scroll bar when shrinking the window

    How to add + and - to my menu tabs [closed]

    How do i make this nav 100% wide?

    How to avoid this hardcoded index.js when use webpack?

    how can i force all rows in a table to have the same height

    CSS/HTML problem in IE - how to fix?

    How to slow down the last few frames in a CSS sprite animation?

    How to add a z-index to separate image from div border

    How to remove vertical scrollbar from iframe inside the page

    How to center a div being focused? [vertically]

    How can I center-align text with uneven icons either side?

    How to fill Frameless grid dynamically?

    how to center a div without width?

    How can i style textnodes that are direct children of a body-element?

    How to add all li of existing ul to the bottom of another ul base on their css classes

    how to draw a configurable pie chart in css

    How to: Reduce font-size if a line breaks

    Jquery Mobile — how to Override Height and width of select box.

    CSS: how to calculate margin inside a div for a fluid layout

    How to add external css into html

    How to set background-color to the length of the test in a jQuery UI accordion?

    How do I make this responsive layout with CSS?