title: Image Rotation with Fancybox
body: <p>I'm creating an interface that allows users to rotate images 90 degrees counter clockwise.  I rotate the image on the page using jquery and -webkit-transform, but I also want to update the preview of image in the <a href="http://fancyapps.com/fancybox/" rel="nofollow noreferrer">Fancybox</a> slideshow.</p>
  
  <p>I tried rotating the image by doing the following:</p>
  
  <pre><code> $(".fancybox").fancybox({           
        afterShow: function(){
          fancyboxRotation();
        }
      });
  
  function fancyboxRotation(){
      $('.fancybox-wrap').css('webkitTransform', rotate(-90deg));
      $('.fancybox-wrap').css('mozTransform', rotate(-90deg));
  }
  </code></pre>
  
  <p>But that ended up rotating the controls as well (and also placed the close button on the top left instead of the top right):</p>
  
  <p><img src="https://i.stack.imgur.com/RLM1b.jpg" alt="enter image description here"></p>
  
  <p>If I just apply the rotation to the image, the white border around it has the wrong orientation:</p>
  
  <p><img src="https://i.stack.imgur.com/B2zww.png" alt="enter image description here"></p>
  
  <p>Anyone have experience applying transformations to a fancybox image?</p>