Achei duas respostas interessantes neste tópico:
https://stackoverflow.com/questions/18531698/css-rotate-image-and-align-top-left
function rotateImage(elm, deg) {
$(elm).css('margin-left', 0).css('margin-top', 0);
$(elm).css('transform', 'rotate(' + deg + 'deg)');
// Get the container offset
var offsetContLeft = $(elm).parent().offset().left;
var offsetContTop = $(elm).parent().offset().top;
// get the new rotated offset
var offsetLeft = $(elm).offset().left;
var offsetTop = $(elm).offset().top;
// Subtract the two offsets.
var newOffsetX = Math.floor(offsetContLeft - offsetLeft) + 1;
var newOffsetY = Math.floor(offsetContTop - offsetTop) + 1;
$("#a").text(newOffsetX + "-" + newOffsetY)
// Apply the new offsets to the margin of the element.
$(elm).css('margin-left', newOffsetX).css('margin-top', newOffsetY)
.css('margin-right', newOffsetX).css('margin-bottom', newOffsetY);
}
var rot = 0;
$("#myrotate").click(function (e) {
rot += 15;
rotateImage('#myimage', rot);
});
Fiddle
E esta também:
div:hover #myimage {
-webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
-moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
-ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
-o-transform: translateX(-100%) rotate(-90deg); /* Opera */
transform: translateX(-100%) rotate(-90deg); /* W3C */
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right;
}
<div style="border: 1px solid red;">
<img id="myimage" src="http://upload.wikimedia.org/wikipedia/mediawiki/a/a9/Example.jpg" style="border: 3px solid silver;" />
</div>