CSS3 Rotation Issues

HTML

<p>Press <strong>Ctrl</strong> while dragging</p>
<div class="container">
    <div class="frame rotatable"></div>
    <div class="follower"></div>
</div>

<input id="angle" value="" name="angle" />

CSS

.frame {
    background: url(http://i.imgur.com/4XCvs.jpg)no-repeat left bottom;
    width: 200px;
    height: 160px;
    left: 90px;
    top: 90px;
    position: absolute;
    z-index: 10;
}

.follower {
    width: 160px;
    height: 160px;
    left: 89px;
    top: 89px;
    position: absolute;
    z-index: 5;
    border: 1px dashed red;
}

.container {
    margin-left: 50px;
    margin-top: 50px;
    width: 240px;
    height: 240px;
    border: 5px solid cyan;
}

#angle {
    margin-top: 50px;
    margin-left: 25px;
    width: 300px;
    text-align: center;
}

p strong { font-weight: bold; }

JavaScript

var test = 0;
  var mouseDown = false;

  $(function() {
      $('.container').mousedown(function(e) { mouseDown = true; });
      $('.container').mouseup(function(e) { mouseDown = false; });
      $('.container .rotatable').live('mousemove', function(e) {
          if ((mouseDown) && (e.ctrlKey)) {

              test = (test + 10) % 360;

              var rotatedSize = $(this).rotatedSize(test);
              $('#angle').val('Angle: ' + test + '° Size: ' + $(this).width() + 'x' + $(this).height() + ' --> Rotated: ' + rotatedSize.width + 'x' + rotatedSize.height);
              
              var rotTxt = 'rotate('+test+'deg)';
              $(this).css({ transform: rotTxt, '-webkit-transform': rotTxt, '-moz-transform': rotTxt, '-o-transform': rotTxt });
             $('.follower').width(rotatedSize.width).height(rotatedSize.height);
          }
          $('.follower').css({ 'left': $('.frame').position().left - 1, 'top': $('.frame').position().top - 1 });
          $('.container .rotatable').draggable({ containment: 'parent' });

      });
  });

$.fn.rotatedSize = function(angle) {
    var rads = angle * Math.PI / 180;
    var cosA = Math.cos(rads);
    var sinA = Math.sin(rads);
    var width = this.width();
    var height = this.height();
    
    /*
    var x1 = cosA * width,
        y1 = sinA * width,
        x2 = -sinA * height,
        y2 = cosA * height,
        x3 = cosA * width - sinA * height,
        y3 = sinA * width + cosA * height;
    
    var minX = Math.min(0, x1, x2, x3),
        maxX = Math.max(0, x1, x2, x3),
        minY = Math.min(0, y1, y2, y3),
        maxY = Math.max(0, y1, y2, y3);

    var rotatedWidth  = Math.round(maxX - minX),
        rotatedHeight = Math.round(maxY - minY);
    */
    
    var rotatedWidth = Math.round(width * Math.abs(cosA) + height * Math.abs(sinA)),
        rotatedHeight = Math.round(width * Math.abs(sinA) + height * Math.abs(cosA));

    var rotSize = { 'width': rotatedWidth, 'height': rotatedHeight };

   ...