text-rotation - problem with IE

Question

Hi I'm trying to rotate a text, but i'm facing 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 doens't rotate. Does anyone can tell me why??

thanks

The question already answered here: http://stackoverflow.com/questions/4617220/css-rotate-property-in-ie — nicolsondsouza, May 27 '13 at 13:42

score 1 · Answer 1 · answered Apr 07 '12 at 00:37

1

Use Matrix for the rotation:

Here is for -90deg

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

answered Apr 07 '12 at 00:37

Starx

77,474
47
185
261

score 1 · Answer 2 · answered Aug 29 '11 at 20:17

1

I would guess it's this property causing the problem:

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

I'm not aware of any proprietary IE filter like that. Try this:

.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;
}

answered Aug 29 '11 at 20:17

robertc

74,533
18
193
177

1

That's wired. I did a fiddle (http://jsfiddle.net/PrXsR) and it's fine on IE, but in my web site it isn't working on IE. any ideas?? – saomi Aug 30 '11 at 15:22
@user794035 Is IE blocking ActiveX controls or scripting on your website? – robertc Aug 30 '11 at 17:51

Vladimir Starkov · Answer 3 · 2012-05-22T03:45:54.007

There is error in your code

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

For crossbrowser rotation use this syntax from css3please.com, which in your case look 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 */
}

score 0 · Answer 4 · answered Apr 07 '12 at 00:32

I used the following and it worked well. I found it from css-tricks.com (which is a great resource gotta say). Anyway, worked for me. I realize this is a bit late - ha - but maybe it will help someone else who find this like I did.

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

text-rotation - problem with IE

4 Answers4

Linked