在IE中使用javascript css转换旋转png图像

Question

我需要旋转png图像(一些圆盘)。这是在jQuery的一些帮助下完成的：

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

在IE <9的所有版本中，都会出现严重的错误。旋转动画很糟糕，在旋转之后，这些图像的alpha透明度会发生一些非常丑陋的事情。

有没有可能在IE8和IE7(或多或少IE6？)中做到这一点。如果没有，我将被迫命令它在闪存中完成。但我想首先尝试使用css和javascript (svg?)。对于使用不同的技术或js库，你有什么建议吗？

提前感谢您的任何答复。

编辑:我实际上没有找到使用CSS和JS在IE中旋转png图像的解决方案。这就是说，所有的东西都是用Raphaël重做的，即使在IE6中也能很好地工作。

EDIT2:拉斐尔的最终结果：http://ipm-profil.de/diversity/我使用了GIF图像，并用SVG (拉斐尔代码)遮盖了这些圆圈的“粗糙边缘”。

Answer 1

为此，我强烈建议使用Raphaël—JavaScript Library。Raphaël目前支持火狐3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+和is 6.0+，并且非常易于使用，并且可以很好地与JQuery配合使用。

Answer 2

如果你不关心老版本的浏览器是否可以查看它，IE9已经添加了transform属性：

-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. */

我在http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html找到了一个很好的JS，JS在这篇文章的底部。

Answer 3

在SVG中这样做可能是值得的。它将像在所有浏览器中一样工作，包括IE9。对于小于9的IE，您可以使用SVGWeb。它是一个Flash填充程序，可以让SVG在不支持它的浏览器中工作。