CSS rotate property in IE

Question

I want to rotate the DIV to a certain degree. In FF it functions but in IE I am facing a problem.

For example in the following style I can set rotation=1 to 4

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

This means that the DIV will be rotated to 90 or 180 or 270 or 360 degree. But if I need to rotate the DIV only 20 degrees, then it doesn't work anymore.

How may I solve this problem in IE?

While it is possible to do transforms in IE8 (and IE6 and IE7) using filter matrix, it rotates around a different point to regular CSS rotations, and there's no simple way to fix this. This means that your rotated elements will always have a different position in IE8 to other browsers - unless you do the rotation in JS e.g. via a library. [More detail, examples and a suggested JS library at this question](http://stackoverflow.com/questions/17490216/). — user56reinstatemonica8, Jul 05 '13 at 15:52

score 145 · Accepted Answer · edited Dec 24 '22 at 20:53

To rotate by 45 degrees in IE, you need the following code in your stylesheet:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

You’ll note from the above that IE8 has different syntax to IE6/7. You need to supply both lines of code if you want to support all versions of IE.

The horrible numbers there are in Radians; you’ll need to work out the figures for yourself if you want to use an angle other than 45 degrees (there are tutorials on the internet if you look for them).

Also note that the IE6/7 syntax causes problems for other browsers due to the unescaped colon symbol in the filter string, meaning that it is invalid CSS. In my tests, this causes Firefox to ignore all CSS code after the filter. This is something you need to be aware of as it can cause hours of confusion if you get caught out by it. I solved this by having the IE-specific stuff in a separate stylesheet which other browsers didn’t load.

All other current browsers (including IE9 and IE10 — yay!) support the CSS3 transform style (albeit often with vendor prefixes), so you can use the following code to achieve the same effect in all other browsers:

-moz-transform: rotate(45deg);  /* FF3.5/3.6 */
-o-transform: rotate(45deg);  /* Opera 10.5 */
-webkit-transform: rotate(45deg);  /* Saf3.1+ */
transform: rotate(45deg);  /* Newer browsers (incl IE9) */

Edit

Since this answer is still getting up-votes, I feel I should update it with information about a JavaScript library called CSS Sandpaper that allows you to use (near) standard CSS code for rotations even in older IE versions.

Once you’ve added CSS Sandpaper to your site, you should then be able to write the following CSS code for IE6–8:

-sand-transform: rotate(40deg);

Much easier than the traditional filter style you'd normally need to use in IE.

Edit

Also note an additional quirk specifically with IE9 (and only IE9), which supports both the standard transform and the old style IE -ms-filter. If you have both of them specified, this can result in IE9 getting completely confused and rendering just a solid black box where the element would have been. The best solution to this is to avoid the filter style by using the Sandpaper polyfill mentioned above.

Many things using IE matrix transform filters will fail in IE10 and appear to fail in IE10 simulating old browsers because [IE10 by default has 'legacy filters' disabled](http://stackoverflow.com/questions/16340945/). Yes, IE updates *still* break things even now they're trying to follow standards... So make sure that IE10+ uses standard `transform` CSS, not MS filters. If you use IE10 browser modes to test older versions of IE, tell it to enable legacy filters - but don't forget that your IE10+ users will have legacy filters *disabled*! Arrrrrgggghhhhhhhhh — user56reinstatemonica8, Jul 05 '13 at 09:52
@user568458 - The real message here is: Do not use IE10's compatibility modes to test your site for IE9/8/7 compatibility; it is not a good enough test; there are a number of things that compatibility mode gets wrong compared with real copies of the old IE verions; the only valid test is in a real copy of the browser you want to support. Also note that in IE11, they will explicitly prevent you from doing this; the compatibility modes will not be available to change in the same way in the dev tools; the only modes available will be "edge" and any mode that the site sets explicitly, if any. — Spudley, Jul 05 '13 at 10:05
+1 for good solution, but I should tell you that the horrible numbers are NOT in radians - they are sines/cosines of angles (in this case 45 degrees or $\pi/4$ radians), which are independent of the measure of angles used... the numbers here are $\pm\sqrt{2}$ — danimal, Nov 13 '15 at 11:59

zzzzBov · Answer 2 · 2012-10-05T13:12:11.627

59

You'll need to do a matrix transform as follows:

filter: progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  sizingMethod = 'auto expand'
);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  SizingMethod = 'auto expand'
)";

Where COS_THETA and SIN_THETA are the cosine and sine values of the angle (i.e. 0.70710678 for 45°).

edited Oct 05 '12 at 13:12

answered Jan 06 '11 at 16:45

zzzzBov

174,988
54
320
367

2

Every other thread on IE matrix translate that I've seen has talked as if it's on a par with string theory and hasn't even tried to explain it - turns out you just need to hit `sin` and `cos` on a calculator! Thanks! – user56reinstatemonica8 Jul 05 '13 at 09:58
2

IE6 requires the ms-filter declaration to be in one line only, newer versions wont have that problem! – Mister Crimson Nov 05 '13 at 12:18
In addition to @MisterCrimson comment, I had to put everything in one line within sass file as well. – Karol Jan 19 '15 at 00:16

score 26 · Answer 3 · edited May 08 '12 at 19:28

26

There exists an on-line tool called IETransformsTranslator. With this tool you can make matrix filter transforms what works on IE6,IE7 & IE8. Just paste you CSS3 transform functions (e.g. rotate(15deg) ) and it will do the rest. http://www.useragentman.com/IETransformsTranslator/

edited May 08 '12 at 19:28

Spudley

166,037
39
233
307

answered Feb 21 '12 at 11:01

nmsdvid

2,832
2
21
21

3

Sweet! Great link. Haven't used the sin / cos buttons on a calculator since high school and don't especially want to start now. – squarecandy Mar 21 '13 at 20:59

score 6 · Answer 4 · edited May 23 '17 at 12:34

6

http://css3please.com/

Scroll down to '.box_rotate' for the Microsoft IE9+ prefix. Similar discussion here: Rotating a Div Element in jQuery

edited May 23 '17 at 12:34

Community

1
1

answered Jan 06 '11 at 16:46

Steve Burrows

71
1

score 2 · Answer 5 · answered Jan 29 '14 at 20:30

Just a hint... think twice before using "transform: rotate()", or even "-ms-transform :rotate()" (IE9) with mobiles!

I've been knocking hard to the wall for days. I have a 'kinetic' system going on, that slides images and, on top of it, a command area. I did "transform" on an arrow button so it simulates pointing up and down... I've reviewd the 1.000 plus code lines for ages!!! ;-)

All ok, once I removed transform:rotate from the CSS. It's a bit (not to use bad words) tricky the way IE handles it, comparing to other borwsers.

Great answer @Spudley! Thanks for writing it!

score 2 · Answer 6 · answered Sep 10 '14 at 08:33

2

Usefull Link for IE transform

This tool converts CSS3 Transform properties (which almost all modern browsers use) to the equivalent CSS using Microsoft's proprietary Visual Filters technology.

answered Sep 10 '14 at 08:33

Prashant Tapase

2,132
2
25
34

score 0 · Answer 7 · edited Jun 20 '16 at 22:32

0

For IE11 example (browser type=Trident version=7.0):

image.style.transform = "rotate(270deg)";

edited Jun 20 '16 at 22:32

Paul Roub

36,322
27
84
93

answered Jun 20 '16 at 22:31

C_J

21
3

CSS rotate property in IE

7 Answers7

Edit

Edit

Linked

Related