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 f

Answer 1

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 2

There is other way to rotate images without any filters / html5.. it's nasty and useless in real world, but possible.

You can store your image as array of pixels, for javascript. Write function to perform rotation with it and encode it to base64 datauri, bmp could be easy and replace image.src with it.

There will be some limitation about filesize and support in old browser and of course terrible performance..

Answer 3

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 4

If you're using jQuery, jQueryRotate is a small (less than 3Kb minified+gzipped) plugin that rotates images:

http://jqueryrotate.com/

Answer 5

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

uses canvas but also supports IE