title: Rotate image with javascript
body: <p>I need to rotate an image with javascript in 90-degree intervals. I have tried a few libraries like <a href="http://code.google.com/p/jqueryrotate/" rel="noreferrer">jQuery rotate</a> and <a href="http://raphaeljs.com/image-rotation.html" rel="noreferrer">Raphaël</a>, but they have the same problem - The image is rotated around its center. I have a bunch of content on all sides of the image, and if the image isn't perfectly square, parts of it will end up on top of that content. I want the image to stay inside its parent div, which has max-with and max-height set.</p>
  
  <p>Using jQuery rotate like this (<a href="http://jsfiddle.net/s6zSn/1073/" rel="noreferrer">http://jsfiddle.net/s6zSn/1073/</a>):</p>
  
  <pre><code>var angle = 0;
  $('#button').on('click', function() {
      angle += 90;
      $("#image").rotate(angle);
  });
  </code></pre>
  
  <p>Results in this:</p>
  
  <p><img src="https://i.stack.imgur.com/2pu8l.png" alt="How jQuery rotate works"></p>
  
  <p>And this is the result i would like instead:</p>
  
  <p><img src="https://i.stack.imgur.com/mD86F.png" alt="How I would like it to work"></p>
  
  <p>Anyone have an idea on how to accomplish this?</p>