text-rotation - problem with IE
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
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;
}
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;
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 */
}
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');
精彩评论