CSS rotation not working in IE

[cmr42]

I'm trying to get rotated images. The CSS below works for FF, Safari and Chrome but not for IE (typical!). Any ideas how I can get rotation happening in IE?


#two {float: right;
position: relative;
width: 200px;
height: 200px;
margin: 20px;
color: #134b96;
padding: 5px 5px 5px 5px;
background: #FFFFFF;
border-width: 3px;
border-style: solid;
border-color: #FCF93D;
outlineStyle: solid;
outlineWidth: 1px;
outline-color: #FFFFFF;
z-index:0;
behavior:url(-ms-transform.htc);
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
}
#two:hover {
-moz-transform:rotate(-30deg);
-webkit-transform: rotate(-30deg);
-o-transform:rotate(-30deg);
-ms-transform: rotate(-30deg);
}

Many thanks all!

[coothead]

Hi there cmr42,

at present, only Firefox and Safari support the CSS3 transform attribute - ( I am unable to test for Chrome ;)).

For IE check out...
Matrix Filter (http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx)
coothead

[cmr42]

Thanks, I thought that would be the case. I've tried this in Chrome and it does seem to work, so I guess that is a bonus! Hopefully IE will get it's ass in gear and be able to deal with CSS3 by the next release.

[zvona]

I noticed this msg on other context, and remembered I had an account at DD (but it was Coding Forums). However, now I have an account and I should answer to this.

Most likely, you're referring to this article (http://samuli.hakoniemi.net/cross-browser-rotation-transformation-with-css/) I wrote few months ago.

I'm in very early stage of the process (been there for months :() for doing CSS3 support in Internet Explorer. However, if you like to use that -ms-transform -property, go ahead and check:

http://demo.hakoniemi.net/ms-transform/-ms-transform.htc

Like I said, it's very immature for general use, containing test functions etc. However, it can solve your problem with rotate transform (or transition). It also supports scale transform and accepts "opacity" instead of filter:alpha().

For instance, Zoltan Hawryluk has made more progress on this subject: http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/