Best IT Recipes

CSS3 transform: rotate; in IE9

I have an element that should be vertical in the design that I made. I have css for this to work in all browsers except IE9. I used a filter for IE7 and IE8:

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

This seems to make my element transparent in IE9, and the CSS3 'tranform' porperty doesn't seem to do anything!

Does anyone know about rotating elements in IE9?

Really appreciate the help!

Sh.

+76
css internet-explorer css3 internet-explorer-9 rotation
Feb 01 '11 at 16:28
source share
4 answers

The standard CSS3 rotate should work in IE9, but I believe that you need to provide it with a provider prefix, for example:

  -ms-transform: rotate(10deg);

It may not work in beta; if not, try downloading the current preview version (preview 7), which is a later beta version. I don’t have a beta version for testing, so I can’t confirm whether it was in this version or not. The final release is definitely intended to support it.

I can also confirm that the IE-specific filter property has been reset in IE9.

[Change]
People asked for additional documentation. As the saying goes, this is pretty limited, but I found this page: http://css3please.com/ , which is useful for testing various CSS3 features in all browsers.

But testing the rotation function on this page in IE9 preview caused it to crash quite spectacularly.

However, I did some independent tests using -ms-transform:rotate() in IE9 on my test pages, and it works fine. Therefore, I came to the conclusion that this function is implemented, but there are some errors, possibly related to its dynamic configuration.

Another useful checkpoint for which functions are implemented in which browsers - www.canIuse.com - see http://caniuse.com/#search=rotation

[EDIT]
The revival of this old answer is because I recently learned about a hack called CSS Sandpaper , which is relevant to the question and can make the task easier.

Hack implements standard CSS transform support for older versions of IE. So now you can add the following to your CSS:

 -sand-transform: rotate(10deg);

... and work in IE 6/7/8 without using filter syntax. (of course, it still uses the filter syntax behind the scenes, but it greatly simplifies management because it uses the same syntax for other browsers)

+135
Feb 01 '11 at 16:38
source share

try it

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> body { margin-left: 50px; margin-top: 50px; margin-right: 50px; margin-bottom: 50px; } .rotate { font-family: Arial, Helvetica, sans-serif; font-size: 16px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -sand-transform: rotate(10deg); display: block; position: fixed; } </style> </head> <body> <div class="rotate">Alpesh</div> </body> </html>
+5
Apr 01 '13 at 5:06 on
source share

I also had problems with conversions in IE9, I used -ms-transform: rotate(10deg) , and that didn't work. I tried everything I could, but the problem was in browser mode, to do the conversion, you need to set the compatibility mode to "Standard IE9".

+4
Jun 11 2018-12-12T00:
source share

I know this is old, but I had the same problem, I found this post, and although it did not explain exactly what happened, it helped me answer correctly - so I hope my answer helps someone else who can have a similar problem for mine.

I had an element that I wanted to rotate vertically, so naturally I added a filter: for IE8, and then for the -ms-transform property for IE9. I found that having the -ms-transform property AND the filter applied to the same element causes IE9 to render the element very poorly. My decision:

  • If you use the transform-origin property, add it for MS (-ms-transform-origin: left bottom;). If you don’t see your element, perhaps it rotates on it along the middle axis and thus leaves the page somehow - so double check it.

  • Move the filter: property for IE7 & 8 to a separate stylesheet and use IE to insert this stylesheet for browsers smaller than IE9. Thus, this does not affect IE9 styles, and everything should work fine.

  • Be sure to use the correct DOCTYPE tag; if you have it wrong IE9 will not work properly.

+3
Sep 02 '14 at 19:42
source share


More articles:


All Articles