Question

I am going to ask yet another question!

So, CSS Rotate works in ie9 but getting a rotate to work in a previous version is going to be the death of me!

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

This line of code rotates elements by 90 degrees, but around the same origin as the other browsers. If the element is too close to the side of the page, it might be rotated to the outside. Microsoft’s IE docs do not make it clear how to set transform origins.

My full code is:

#quick {
    position:fixed;
    top:250px;
    left:-158px;
}
#qmenu-wrapper {
    background-image: url(../images/img_08.png);
    background-repeat:repeat-x;
    height: 35px;
    width:350px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

}

Is there something we can do to make IE 7 and 8 handle rotations in the same way as 9?

Thanks.

Me!

Answer 1

IE5.5, IE6, IE7 and IE8 are supporting filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
IE5 don’t support it!

Source

To change rotation origin using DX Filters just use Matrix filter to change the position of your element. You can have multiple filters on one element. You need to do a little math. Good luck with that!