Text-rotation - problem with IE

Question

Hi, I'm trying to rotate the text, but I ran into some problems with IE 8 and 9

.casaText{ display:block; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-filter:rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); white-space:nowrap; position:relative; 

In IE, it does not spin. Can anyone tell me why?

thanks

Answer 1

I assume this property is causing the problem:

 -ms-filter:rotate(-90deg); 

I do not know any proprietary IE filter. Try the following:

 .casaText{ display:block; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; white-space:nowrap; position:relative; } 

Answer 2

There is an error in your code

-ms-filter:rotate(-90deg);

To rotate the crossbrowser , use this syntax from css3please.com , which in your case looks like this:

 .casaText{ -webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */ -moz-transform: rotate(-90deg); /* FF3.5+ */ -ms-transform: rotate(-90deg); /* IE9 */ -o-transform: rotate(-90deg); /* Opera 10.5 */ transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17, sizingMethod='auto expand'); /* IE 6-9 */ zoom: 1; /* IE hasLayout trigger */ } 

Answer 3

Use matrix to rotate:

Here for -90deg

 filter: progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=1, M21=-1, M22=6.123233995736766e-17, sizingMethod='auto expand'); zoom: 1; 

Answer 4

I used the following and it worked well. I found it from css-tricks.com (this is a great resource that I have to say). Anyway, worked for me. I understand that this is a little late - ha - but maybe it will help someone else who finds it like me.

 filter:progid:DXImageTransform.Microsoft.Matrix(M11=$m11, M12=$m12, M21=$m21, M22=$m22, sizingMethod='auto expand');