Rotary image or div with javascript?

Question

I am working on a web application that should allow the user to drag and also rotate the image.

Drag and Drop enabled with jQuery UI Draggable.

But how can I rotate the image on the page? My images are basically one colored rectangles. I used divto draw them on the page, but how do I rotate them?

This is normal if they only rotate 22.5-45-67.5-90 degrees

So, I think of three solutions.

• Using Canvas

  Problem: IE Support

• Using divs

  Problem: Canvas is also required for rotation.

• Php gd

  This decision remains the only hope.

  : (22,5 * x) . , .

, . ,

Answer 1

JavaScript, IE.

- , :

• http://raphaeljs.com/

raphael :

• div Raphael.js?

Answer 2

: http://www.dyn-web.com/code/rotate_images/

div javascript

Answer 3

( ), , Flash - .

Answer 4

Javascript, ( CSS, Javascript...). Raphaël; , , JQuery.

Of course, you can use different states of the image one at a time and use them as “sprites” for your rotated rectangles, however you will not play extensibility. (GD is a poor design, do not use this.)