CSS Rotate IE7 and 8 - css

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!

Answer 2

Have a look at the title on the left of this site. I solved the rotation point issue by placing the item in a smaller element with overflow:visible and rotating that element. In other words I made my own pivot point.
In that example I also use writing-mode to rotate the text in IE since using filters disables font smoothing.
<style type="text/css">
/* This wrapper is required to rotate the text around the left edge */
#page_title {
overflow: visible;
position: absolute;
width: 38px;
-moz-transform: rotate(90deg);
-moz-rotation-point: 0 0;
-webkit-transform: rotate(90deg);
-webkit-rotation-point: 0 0;
-o-transform: rotate(90deg);
-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;
}
#page_title h1 {
display: block;
font-size: 70px;
font-weight: normal;
line-height: 38px;
color: #F3C1E0;
font-variant: small-caps;
width: auto;
}
</style>
<div id="page_title">
<h1>Inwardpath Publishers</h1>
</div>