jquery - Rotate an image using Javascript - Stack Overflow

admin管理员组

文章数量:1310519

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 plicated 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.

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 plicated 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.

• javascript
• jquery
• image
• transparency
• rotation

Share Improve this question Follow edited Aug 30, 2011 at 16:28 Safran Ali 4,49799 gold badges4343 silver badges5858 bronze badges asked Oct 18, 2010 at 2:21 SphvnSphvn 5,35388 gold badges4141 silver badges5858 bronze badges 1

• 3 So far as I know, the only viable solutions are witchcraft or voodoo. But seriously, I have never heard of anything that can do this aside from CSS3 + JS but that rules out IE8. – user372743 Commented Oct 18, 2010 at 2:24

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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

Well it might work even with jQueryRotate plugin, have you asked author (me) about this ? :P I dont read stackoverflow so often to answer that kind of requests :)

You could look at using Canvas. No native support from IE 8 but there is a plugin: http://ajaxian./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.

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./p/explorercanvas/

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

本文标签： jqueryRotate an image using JavascriptStack Overflow