Rotating png images using javascript css transformations in IE

I need to rotate png images (some circle disks). It is done with some help of jQuery:

$.fn.rleft = function() {
    return this.animate({
        rotate: '-=45deg'
    });
};

In all versions of IE < 9 things go terribly wrong. Rotation animation is crappy, and there is happening something very ugly with alpha transparency of those images, after they have been rotated.

Is it possible to make this work in IE 8 and 7 (and, more or less IE 6?). If not, I will be forced to order it to be done in Flash. But I would like first to try to do it using just css and javascript (svg?). Do you have any tips, for using different technology, or js library?

Th开发者_StackOverflow中文版ank you in advance for any answers.

EDIT: I actually didn't find solution for rotating png images in IE using CSS and JS. That said, everything was redone using Raphaël, which works very nice even in IE 6.

EDIT2: End result done with Raphael: http://ipm-profil.de/diversity/ I used GIF images, and masked "rough edges" of those circles with SVG (Raphael code).

I would highly recommend using the Raphaël—JavaScript Library for this. Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ and is very easy to use, and works well with JQuery.

IF you don't care if older browsers can view it IE 9 has add the transform property :

-webkit-transform: rotate(15deg) /* for Safari/Chrome */
-moz-transform: rotate(15deg)    /* for Firfox */
-ms-transform: rotate(15deg)     /* for hated IE */
transform: rotate(15deg)         /* The way it should be. */

And I found a good JS at http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html the JS is at the bottom of the post.

It might be worth doing it in SVG. It will work as is in all browsers including IE9. For IE < 9, you can use SVGWeb. Its a Flash shim to make SVG work in browsers that do not support it.