css3 rotate not working in ie9

Question

I found this useful link which explains rotation in IE9 CSS3 transform: rotate; in IE9

unfortunately using either of these does not work

.mark.festival:hover{
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

I have seen in various places that both these rules work for IE9 though mostly I am reading that you need the -ms prefix

http://www.wanderfest.com is the link if you want to check it

the site is not in quirks mode as suggested here

http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/2567faea-fcea-4ddf-9116-1e2c703ee2e7/

Are you trolling us? Rotating 360degrees does effectively nothing. — Shmiddty, Dec 26 '12 at 19:44

score 0 · Accepted Answer · answered Dec 26 '12 at 19:23

That support on caniuse.com has a caveat: you need to use the MS's filter: This translator will convert CSS3 transforms to MS matrices for filters: http://www.useragentman.com/IETransformsTranslator/

Example:

 #transformedObject {
      -moz-transform:    rotate(360deg);
      -o-transform:      rotate(360deg);
      -webkit-transform: rotate(360deg);
      transform:         rotate(360deg);

      /* IE8+ - must be on one line, unfortunately */ 
      -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";

      /* IE6 and 7 */ 
      filter: progid:DXImageTransform.Microsoft.Matrix(
           M11=1,
           M12=0,
           M21=0,
           M22=1,
           SizingMethod='auto expand');
 }

css3 rotate not working in ie9

1 Answers1