title: Make div rotatable in every browser
body: <p>First <strong>i have seen</strong> <a href="https://stackoverflow.com/questions/382591/rotating-a-div-element-in-jquery">Rotating a Div Element in jQuery</a>  but it didnt give me the solution i wished.</p>
  
  <p>I have a div with draggable divs in it.</p>
  
  <p>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).</p>
  
  <p>THe divs are resizable and draggable.</p>
  
  <p>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.</p>
  
  <p>At the moment the html of 1 dropped image in the div board looks like.</p>
  
  <pre><code>&lt;div class="ui-draggable sleep ui-resizable" style="position: absolute; z-index: 1; left: 125px; top: 46px;"&gt;
    &lt;img src="/imgurl.jpg" class="center"&gt;
    &lt;div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"&gt;&lt;/div&gt;
    &lt;div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"&gt;&lt;/div&gt;
    &lt;div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The Jquery for the draggable/resizable items</p>
  
  <pre><code>.draggable({stack: ".sleep", containment: '#bord' })
      .resizable
      ({containment:'#bord',aspectRatio: true})
      .css({position: 'absolute'})
  </code></pre>
  
  <p>I want to make it rotatable in EVERY BROWSER.</p>
  
  <p>Can some one help me in the right way?</p>
  
  <p><strong>edit</strong> more clear question:</p>
  
  <p>I want a dropped div to be rotatable like on this site: <a href="http://mydeco.floorplanner.com/rooms/moodboard/" rel="nofollow noreferrer">http://mydeco.floorplanner.com/rooms/moodboard/</a></p>
  
  <p>i am making something that looks like that site: i have divs with images wich can be dropped.</p>
  
  <p>After the drop i want them to be rotatable with a handler.</p>
  
  <p>I have made the divs droppable resizable and draggable. see code above.</p>
  
  <p>BUT I HAVE NO IDEA WHERE TO START WITH ROTATABLE THATS WHY I POSTED THE QUESTION.</p>
  
  <p>I DONT HAVE EXAMPLES CAUSE I DONT KNOW WHERE TO START.</p>
  
  <p><img src="https://i.stack.imgur.com/947qa.png" alt="example"></p>
  
  <p>I have made a test page were i got a bit ratating but it isnt working good.</p>
  
  <p>You can click on one of the images on the left side.</p>
  
  <p>then they get marked with a white border then click</p>
  
  <p>Omhoog Rechts Omlaag Links  to change directions.  but i want them to turn around with handlers not buttons.</p>
  
  <p>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.</p>