Rotating a text to 270 degrees in IE8

问题

I am trying to rotate a text to 270 degrees, using this code:

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

It works fine in all browsers but not in IE8. What am I doing wrong?

回答1:

Try using this:

-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);

回答2:

IE uses another filter to rotate elements.

Here you can read about it http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx

And here you can easy calculate coeffitients of rotation matrix http://www.boogdesign.com/examples/transforms/matrix-calculator.html Just enter the degree value and it will generate the needed code

You need to add just one line of code:

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

回答3:

IE8 does not support this CSS element.

See: http://social.msdn.microsoft.com/Forums/eu/iewebdevelopment/thread/9b21a3c2-6bdf-4aad-a90d-868bdeb3d866

If you are rotating elements just in IE8+, you'll still need a cross-browser approach. That's because the IE filters are deprecated as of IE9, with IE9 now supporting the CSS3 -ms-transform property. However, for IE8 and earlier, a filter such as BasicImage will be necessary to achieve the effect. So to cater for versions in current use, plus future variations, a prudent approach might be to feed the filter to IE8 and earlier through Conditional Comments, but otherwise use a transform set to cater for current browsers.

来源：https://stackoverflow.com/questions/11900870/rotating-a-text-to-270-degrees-in-ie8