使用Javascript旋转图像

Question

首先，我目前正在使用 JQuery，因此JQuery解决方案可行。

---

我想动态旋转一张图片，旋转角度每秒钟都会变化。

我曾经使用过这个 JqueryRotate插件 ，可以完美地实现每秒钟旋转一次。但是我正在尝试做一些更加复杂的东西。

我希望将4张透明的图片叠放在一起旋转。目前我有四个正确对齐并且看起来很好的<img>标签，但是使用我之前提到的JqueryRotate插件会强制重新绘制图像以进行旋转，导致失去透明度，因此只显示最上面的图片，显然不能满足我的需求。

那么，有哪些好的库/插件或方法可以旋转图片并保持透明度呢？*

必须能够在Opera、Safari、Chrome、Firefox和IE8+中运行。

我希望不必再引入其他库来实现旋转这4张图片，但如果必要，我也可以这样做。谢谢您的帮助。

- Sphvn

---

据我所知，唯一可行的解决方案是巫术或伏都教。但说真的，除了CSS3+JS以外，我从未听说过任何其他能够实现这一点的东西，但这排除了IE8。 - user372743

Answer 1

Raphael 是一个很棒的库，它可以在IE（使用VML）和其他浏览器（使用SVG）中工作。它可以旋转图像并处理透明度。

我不知道有什么其他方法来处理IE。CSS解决方案相当简单，但在IE中无法工作。

另一个选择是使用CSS精灵模拟图像旋转（该示例执行模拟3D旋转，但2D同样容易）。

- Peter Ajtai

Answer 2

嗯，即使使用jQueryRotate插件也可能起作用，你问过作者（我）这个问题了吗？ :P 我不经常阅读stackoverflow来回答那种请求 :)

- Paweł Witkowski Photography

Answer 3

你可以考虑使用Canvas。虽然IE 8没有原生支持，但有一个插件：http://ajaxian.com/archives/explorer-canvas-updated-for-ie-8-and-more。

如果你愿意接受插件的要求，Canvas应该能够轻松完成你的工作。

- SamStephens

---

我想你遇到问题的原因（并没有尝试过）是JqueryRotate正在叠加多个画布。我的建议是将多个图像叠加到单个画布上。我知道canvas支持透明度和旋转。 - SamStephens

Answer 4

你最好的选择是使用canvas并使用IE canvas hack。

对于IE的CSS旋转，就像其他大多数针对IE的hack一样，使用filter属性，这几乎肯定会干扰用于透明图像的filter hack和用于更改不透明度的filter hack。

另一方面，canvas hack使用本地VML，可以处理您需要的所有内容。

http://code.google.com/p/explorercanvas/

我不知道它的性能如何，所以你的结果可能会有所不同。

- Fordi