CSS3 transform: rotate; in IE9

Question

I have an element that needs to be vertical in a design I have done. I have got the css for this to work in all browsers except IE9. I used the filter for IE7 & IE8:

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

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

Does anyone know anyway of rotating elements in IE9?

Really appreciate the help!

W.

Spudley · Accepted Answer · 2012-05-20T23:12:47.080

139

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)

edited May 20 '12 at 23:12

answered Feb 01 '11 at 16:38

Spudley

166,037
39
233
307

Thanks Spud! I'm gonna check it out now and get back to you on that. Couldn't believe how little documentation there was about this online. – wilsonpage Feb 01 '11 at 16:45
@Spudley Could you post a source? I am not able to find that on MSDN http://msdn.microsoft.com/en-us/library/ms531207(v=vs.85).aspx – Šime Vidas Feb 01 '11 at 16:57
@Šime Vidas and @pagewil - you're right, not much documentation around. I found it documented here: http://css3please.com/, though I should note that this page crashed my copy of IE9 preview when I tried to use the rotate property. However, my own independant tests have confirmed that the property does work, with the vendor prefix as I've quoted in my answer. (given the crash, I guess there are still bugs in it though!) – Spudley Feb 01 '11 at 17:22
I really don't get why rotate need a vendor prefix, when they go standard with the rest of CSS3 – Eduardo Molteni Mar 15 '11 at 13:53
@Eduardo - possibly because the standard hasn't been finalised yet? – Spudley Mar 15 '11 at 13:57
@Spudley: yeah, but isn't finalized for the other properties either – Eduardo Molteni Mar 15 '11 at 15:44
@Eduardo - *shrug* I dunno. It's up to the vendors really to decide whether they're ready in their browser for the feature to drop the prefix. It seems like it's stable, but `transform` covers a lot of stuff, so maybe there's still some debate at W3C about some aspect of it? Whatever, each vendor needs to make that decision when they feel they're ready. – Spudley Mar 15 '11 at 16:03
Unfortunately they don't support rotateX, rotateY -_-. Just the plain rotateZ which is implied by rotate(). – EricG Nov 14 '12 at 10:01
I am getting nothing from any of these rules in IE9 for rotate – Alex Borsody Dec 26 '12 at 19:00
@alex_b - the most likely reason for that is if it's running in compatibility mode. Check the mode by pressing F12 to bring up the dev tools. – Spudley Dec 26 '12 at 19:31
Also, pay attention on the crossbrowser line that must be excluded for IE9+: filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3) – Mladen Janjetovic Dec 10 '14 at 09:59

score 5 · Answer 2 · edited Apr 04 '13 at 14:33

Try this

<!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>

i try this code with ie9, FireFox, Chrome, Safari & it's work — Alpesh Panchal, Apr 01 '13 at 05:10

score 4 · Answer 3 · answered Jun 11 '12 at 10:58

4

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

answered Jun 11 '12 at 10:58

Katherine Mokhova

63
4

1

press f12 in ie and select change browser mode to ie-9 and then check this will work... – CSS Guy Jun 11 '12 at 11:05
3

For IE9 to work with vertical text, you have to turn off quirks mode by using the following as the first two lines of your file: ` ` `` – GlenPeterson Oct 25 '12 at 19:50
3

Any valid doctype should disable quirks mode, eg: . The browser mode should be IE9 by default, unless you've changed your settings. – superluminary Jan 22 '13 at 10:19

score 3 · Answer 4 · edited Sep 22 '14 at 18:27

I know this is old, but I was having this same issue, found this post, and while it didn't explain exactly what was wrong, it helped me to the right answer - so hopefully my answer helps someone else who might be having a similar problem to mine.

I had an element I wanted rotated vertical, so naturally I added the filter: for IE8 and then the -ms-transform property for IE9. What I found is that having the -ms-transform property AND the filter applied to the same element causes IE9 to render the element very poorly. My solution:

If you are using the transform-origin property, add one for MS too (-ms-transform-origin: left bottom;). If you don't see your element, it could be that it's rotating on it's middle axis and thus leaving the page somehow - so double check that.
Move the filter: property for IE7&8 to a separate style sheet and use an IE conditional to insert that style sheet for browsers less than IE9. This way it doesn't affect the IE9 styles and all should work fine.
Make sure to use the correct DOCTYPE tag as well; if you have it wrong IE9 will not work properly.

Good call on `-ms-transform-origin`; that had me scratching my head for a while. — danwild, Feb 19 '15 at 00:34

score 0 · Answer 5 · edited May 30 '21 at 11:57

0

Can use:

 element.style['-ms-transform']='translate...'

edited May 30 '21 at 11:57

4b0

21,981
30
95
142

answered May 30 '21 at 11:44

Mykola Marshalok Orestovych

1

1

Why do you prefer this over the accepted answer? On that note, the accepted answer also offers an excellent example of the level of detail and explanation that the most useful and timelines answers on Stack Overflow have; that's something to strive for. – Jeremy Caney May 31 '21 at 00:15

CSS3 transform: rotate; in IE9

5 Answers5

Linked