3

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?

MSeifert
  • 145,886
  • 38
  • 333
  • 352
balanv
  • 10,686
  • 27
  • 91
  • 137
  • It [seems to work](http://api.browsershots.org/png/original/36/365ecd6d1466e6345546595af5cefb47.png) for me: http://jsfiddle.net/PZkDK/ – scumah Aug 10 '12 at 12:16

3 Answers3

6

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);
Claudiu Claw
  • 893
  • 7
  • 10
5

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')";
Kolyunya
  • 5,973
  • 7
  • 46
  • 81
  • thanks for the link to boogdesign. that really helped out here, since i needed a dynamic javascript solution.. – honk31 Feb 07 '13 at 15:55
  • being able to obtain the calculation of the coeficient matrix was very helpful, it's sad ie8 still survived after two years since this question was posted. – AGE Oct 02 '15 at 13:46
1

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.

Justin Skiles
  • 9,373
  • 6
  • 50
  • 61