14

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.

Improve this question

5 Answers 5

Reset to default
15

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

uses canvas but also supports IE

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

12

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

http://jqueryrotate.com/

Improve this answer

1 Comment

Updated link to most recent version
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)

Improve this answer

1 Comment

The problem with filters is that after applying the matrix filter the clarity of the image is reduced to some extend. Is there a way to avoid this??
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.

Improve this answer

1 Comment

Just a warning regarding the JavaScript solution: even for an image as small as 100x100, it'll generate 10,000 div elements, each with the image as their background. This is sure to bring down some browsers when doing it to larger images.
1

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.