CSS3 transform: rotate; in IE9

by

Standard CSS3 rotate should work in IE9, but I believe you need to give it a vendor prefix, like so:

  -ms-transform: rotate(10deg);

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

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

[Edit]
People have asked for some further documentation. As they say, this is quite limited, but I did find this page: http://css3please.com/ which is useful for testing various CSS3 features in all browsers.

But testing the rotate feature on this page in IE9 preview caused it to crash fairly spectacularly.

However I have done some independant tests using -ms-transform:rotate() in IE9 in my own test pages, and it is working fine. So my conclusion is that the feature is implemented, but has got some bugs, possibly related to setting it dynamically.

Another useful reference point for which features are implemented in which browsers is www.canIuse.com — see http://caniuse.com/#search=rotation

[EDIT]
Reviving this old answer because I recently found out about a hack called CSS Sandpaper which is relevant to the question and may make things easier.

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

-sand-transform: rotate(10deg);

…and have it work in IE 6/7/8, without having to use the filter syntax. (of course it still uses the filter syntax behind the scenes, but this makes it a lot easier to manage because it’s using similar syntax to other browsers)

More Related Contents:

  1. Make Adobe fonts work with CSS3 @font-face in IE9
  2. Support for “border-radius” in IE
  3. Inline block doesn’t work in internet explorer 7, 6
  4. CSS rotate property in IE
  5. IE9 blocks download of cross-origin web font
  6. Box shadow in IE7 and IE8
  7. Emulating CSS3 border-radius and box-shadow in IE7/8
  8. internet explorer 10 – how to apply grayscale filter?
  9. CSS3 PIE – Giving IE border-radius support not working?
  10. CSS3 transform:scale in IE
  11. How long of a URL can Internet Explorer 9 take?
  12. text-overflow:ellipsis doesn’t work on IE
  13. Difference between “Browser Mode” and “Document Mode” in Internet Explorer
  14. IE11 Document mode defaults to IE7. How to reset?
  15. Detect when a web page is loaded without using sleep
  16. How do I force Internet Explorer to render in Standards Mode and NOT in Quirks?
  17. Flex auto margin not working in IE10/11
  18. IE and Edge fix for object-fit: cover;
  19. How does ?#iefix solve web fonts loading in IE6-IE8?
  20. IE9 border-radius and background gradient bleeding
  21. How to make Google Fonts work in IE?
  22. Finding an elements XPath using IE Developer tool
  23. Blank iFrame in IE
  24. Internet Explorer 11 won’t set cookies on a site
  25. Internet Explorer 11 does not add the Origin header on a CORS request?
  26. Will targeting IE8 with conditional comments work?
  27. IE6 Hover Issue
  28. Force Internet Explorer to use a specific Java Runtime Environment install?
  29. IE11 meta element Breaks SVG
  30. reusing Internet Explorer COM Automation Object

Leave a Comment