Geek Answers Handbook

CSS Rotation IE8

I am looking for a CSS solution for rotating elements in IE8. Some of the solutions I found say it should work in IE8, but this is not for me. What am I doing wrong?

Here is what I tried:

<!DOCTYPE html> <html> <head> <title></title> <style> .rotate { font-weight: bold;color: #000;background: #aa0;display: block;margin: 0 auto;width: 300px;height: 300px;top: 10%;text-align: center;line-height: 300px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } </style> </head> <body> <div class="rotate"> TESTING ROTATION </div> </body> </html>

I would appreciate if you would check your solution before answering, and it would be great if you could just edit my given example and rewrite all the code.

[EDIT] If someone is still interested, the problem is not in the code, but in the test environment. You should use real IE8 but not IE8 emulator in IE10 / IE11 (not sure about IE9)

+7
html css internet-explorer-8 rotation
source share
2 answers

You are missing the IE -ms provider prefix -

 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

So use this

 -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* for IE8 */

Also look at this question: CSS rotate property in IE , which may help you

+7
source share

Well, I don't think rotation filters work elegantly in IE8. I also tried this, but it did not work for me correctly. I tried using jquery rotate plugin. You can try this - http://code.google.com/p/jqueryrotate/

I have a problem even with this ( jQueryRotate - Problem in IE8 ), but it can help you just in case.

0
source share

More articles: