Question

我需要旋转png图像（一些圆形磁盘）。它是在jQuery的帮助下完成的：

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

在IE的所有版本中＆lt; 9件事情非常糟糕。旋转动画很糟糕，旋转动画后，这些图像的alpha透明度会发生非常难看的事情。

是否有可能在IE 8和7（以及或多或少IE 6？）中使这项工作。如果没有，我将被迫命令它在Flash中完成。但我想首先尝试使用css和javascript（svg？）来做到这一点。您有使用不同技术或js库的任何提示吗？

提前感谢您的任何答案。

编辑：我实际上没有找到使用CSS和JS在IE中旋转png图像的解决方案。也就是说，使用Raphaël重做一切，即使在IE 6中也是如此。

EDIT2：Raphael完成的最终结果：http://ipm-profil.de/diversity/ 我使用了GIF图像，并用SVG（Raphael代码）掩盖了那些圆圈的“粗糙边缘”。

Answer 1

我强烈建议您使用Raphaël—JavaScript Library。 Raphaël目前支持Firefox 3.0 +，Safari 3.0 +，Chrome 5.0 +，Opera 9.5+和Internet Explorer 6.0+，并且非常易于使用，并且与JQuery配合使用。

Answer 2

如果您不关心旧浏览器是否可以查看它，IE 9会添加转换属性：

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

我找到了一个很好的JS http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html JS位于帖子的底部。

Answer 3

在SVG中进行它可能是值得的。它将在所有浏览器中工作，包括IE9。对于IE＆lt; 9，你可以使用SVGWeb。它是一个Flash Shim，可以让SVG在不支持SVG的浏览器中运行。

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

3 个答案: