Make div rotatable in every browser
css, jquery, jquery-ui, rotation
Solution
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.
Problem
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.