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?

Thank 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: / I used GIF images, and masked "rough edges" of those circles with SVG (Raphael code).

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?

Thank 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).

• javascript
• css
• html
• png

Share Improve this question Follow edited Jan 23, 2012 at 16:28 Ernest asked Jan 9, 2011 at 20:41 ErnestErnest 8,83966 gold badges4141 silver badges5151 bronze badges 3

• I tested the site on IE8 and everything looks fine with the opacity... – Chandu Commented Jan 9, 2011 at 20:46
• @Cybernate: very strange, I tested it on few puters. I updated question with reference image. – Ernest Commented Jan 9, 2011 at 21:09
• I didn't notice th black borders in IE8 earlier. Yes you are right, IE8 shows those distortions. – Chandu Commented Jan 9, 2011 at 21:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I would highly remend 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./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.