Rotate image clockwise or anticlockwise inside a div using javascript

Question

HI, Is there a way by which I can rotate an image inside a div clockwise or anticlockwise.

I have a main fixed width div[overflow set to hidden] with images loaded from database. There is a scroll bar for showing the images inside the div. When image is clicked then I need to show the rotating animation either in clockwise or anticlockwise direction.

I have done it using Matrix filter. I would like to know whether it is possible to be done in IE only without using any filters.

Answer 1

The only way I can think of for rotating images on the client-side in IE is using filters. For somewhat recent versions the other browsers you can use the <canvas> control.

Your alternative is to use a server-side script to rotate the image. Then you can send the information on how to rotate it with JavaScript (i.e. generate a path to the image such as /rotate?image=img.jpg&amount=90)

Answer 2

CSS3 supports rotation, but it isn't widely supported. As you asked for JavaScript solution, here's one, but I don't think you can get smooth images.

Answer 3

try this: http://raphaeljs.com/image-rotation.html

uses canvas but also supports IE

Answer 4

A small library that only rotates images (less than 3Kb Minified+gzipped)

http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html