CSS Rotate IE7 and 8

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!

You might want to consider trying jQuery rotate: http://code.google.com/p/jqueryrotate/ — aroth, Mar 08 '12 at 02:43
possible duplicate of [CSS rotate property in IE](http://stackoverflow.com/questions/4617220/css-rotate-property-in-ie) — Liam, Mar 13 '14 at 13:35

Mohsen · Accepted Answer · 2012-03-08T03:16:28.390

4

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!

edited Mar 08 '12 at 03:16

answered Mar 08 '12 at 03:06

Mohsen

64,437
34
159
186

score 4 · Answer 2 · answered Mar 08 '12 at 03:16

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&nbsp;Publishers</h1>
</div>

CSS Rotate IE7 and 8

2 Answers2

Linked

Related