Rotate an image using Javascript

Question

First off, I am currently using JQuery so JQuery solutions viable.

---

I want to rotate an image by a dynamic X degrees which is calculated every sec.

Now I had this working perfectly using this JqueryRotate plugin

The image is rotated perfectly every sec. But I am trying something a little more complicated now.

I want to rotate 4 transparent images on top of each other. Currently I have four <img> tags all correctly aligned and looking nice and pretty ^_^ but using the JqueryRotate plugin that I mentioned earlier forces a redrawing of the image to rotate it losing the transparency so only the top most image is displayed which obviously isn't going to work.

So, What is a good library / plugin or way of rotating an Image whilst keeping transparency?*

Must work in Opera, Safari, Chrome, Firefox and IE8+

I am hoping not to have to include another library for this but if need be I will do so to create this effect of rotating the 4 images. Thanks in advance.

Answer 1

You could look at using Canvas. No native support from IE 8 but there is a plugin: http://ajaxian.com/archives/explorer-canvas-updated-for-ie-8-and-more.

If you were willing to live with the plugin requirement, Canvas should make your job easy.

Answer 2

Your best chance is to use canvas and use the IE canvas hack.

The CSS rotate for IE, like most other hacks for IE, uses the filter property, which will almost certainly interfere with the filter hack that's used for transparent images and the filter hack for changing opacity.

The canvas hack, on the other hand, uses native VML instead, which handles everything you need.

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

I don't know how performant it is, so your mileage may vary there.

Answer 3

Raphael is a great library that works in IE (with VML) and other browsers (with SVG). It can rotate images and deal with transparency.

I don't know of any other way to deal with IE. CSS solutions are quite easy, but they don't work in IE.

Another option is to simulate image rotation with CSS sprites (the example does a simulated 3d rotatoin, but 2d is just as easy).