Make div rotatable in every browser

Question

First i have seen Rotating a Div Element in jQuery but it didnt give me the solution i wished.

I have a div with draggable divs in it.

so 1 main div (bord) with divs in it(class sleep) in the divs sleep are images wich are scaled to 100% width and height of the div(keeping aspect ratio).

THe divs are resizable and draggable.

i want the images (divs) to be able to rotate with a handler on the top right side like with resize on the lower right corner.

At the moment the html of 1 dropped image in the div board looks like.

<div class="ui-draggable sleep ui-resizable" style="position: absolute; z-index: 1; left: 125px; top: 46px;">
  <img src="/imgurl.jpg" class="center">
  <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
  <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
  <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
</div>

The Jquery for the draggable/resizable items

.draggable({stack: ".sleep", containment: '#bord' })
    .resizable
    ({containment:'#bord',aspectRatio: true})
    .css({position: 'absolute'})

I want to make it rotatable in EVERY BROWSER.

Can some one help me in the right way?

edit more clear question:

I want a dropped div to be rotatable like on this site: http://mydeco.floorplanner.com/rooms/moodboard/

i am making something that looks like that site: i have divs with images wich can be dropped.

After the drop i want them to be rotatable with a handler.

I have made the divs droppable resizable and draggable. see code above.

BUT I HAVE NO IDEA WHERE TO START WITH ROTATABLE THATS WHY I POSTED THE QUESTION.

I DONT HAVE EXAMPLES CAUSE I DONT KNOW WHERE TO START.

I have made a test page were i got a bit ratating but it isnt working good.

You can click on one of the images on the left side.

then they get marked with a white border then click

Omhoog Rechts Omlaag Links to change directions. but i want them to turn around with handlers not buttons.

There are over 600 lines of code most of them php and jquery i tryd to make a fiddle but its to much code. all jquery is viewable in source.

Answer 1

Since this was very interesting to me because I know in the future i might need something like this, I did more research than usual and im happy because i found the perfect solution.

Take a look at this JQuery plugin https://github.com/gthmb/jquery-free-transform

This plugin not only allows you to rotate but to free-transform the element, hope you find it helpful.