CSS Transform not working in IE 8 and IE7 browser

Question

i want to rotate a span text using css transform in IE7 and IE8 browser.

<SPAN style="FONT-SIZE: 14px; -ms-transform:rotate(-90deg);   FONT-FAMILY: Segoe UI; POSITION: absolute; ZOOM: 1; COLOR: #707070; LEFT: -64px;  TOP: 234px; VISIBILITY: visible">Sales Amount in millions(USD)
</SPAN>

above code will rotate the text in IE9+ and other browsers. but how can i rotate the span text that will work in IE7 and IE8 browser.

filter to support older version

how can i use filter to rotate span element ?

Thanks,

Siva

score 3 · Answer 1 · answered Sep 05 '13 at 10:16

3

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

The rotation property of the BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively.

answered Sep 05 '13 at 10:16

Arunkumar

5,150
4
28
40

score 3 · Answer 2 · answered Sep 05 '13 at 10:27

Some of new attributes of css can implement with filter attribute for IE. For example If you want to have scale transform you use:

-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);

and etc extensions for non IE browsers. But If you Want to use this for IE 8 or older. you should do this:

filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.05,M12=0,M21=0,M22=1.05,SizingMethod='auto expand');

score 1 · Answer 3 · answered Sep 05 '13 at 10:20

You may use Matrix Filtering which is depracated from IE 9 and on. Furthermore as they mention on this link: http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx

Resizes, rotates, or reverses the content of the object using matrix transformation.

And here is another link to make it easier for you: http://www.boogdesign.com/examples/transforms/matrix-calculator.html

Example of 90deg rotation:

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=-1.00000000, M21=1.00000000, M22=0.00000000,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=-1.00000000, M21=1.00000000, M22=0.00000000,sizingMethod='auto expand');
-moz-transform:  matrix(0.00000000, 1.00000000, -1.00000000, 0.00000000, 0, 0);
-webkit-transform:  matrix(0.00000000, 1.00000000, -1.00000000, 0.00000000, 0, 0);
-o-transform:  matrix(0.00000000, 1.00000000, -1.00000000, 0.00000000, 0, 0);

CSS Transform not working in IE 8 and IE7 browser

3 Answers3