javascript - jquery/CSS rotate hides half of the image? -

i want able rotate image in 4 steps if user want it, i'm having problems since rotation use centers image , hides half of image when want image align left , top, when rotated. i've used script jqueryrotate , see mean i've made fiddle here: http://jsfiddle.net/sqnsa/

as see aligns image center when rotating vertical, there way css or javascript make align top , left. javascript:

var angle = 0; $('#rotate').click(function(e) {     e.preventdefault();      if (angle === 0) {         $("#rotation").rotate(90);     }     if (angle === 1) {         $("#rotation").rotate(180);     }     if (angle === 2) {         $("#rotation").rotate(270);     }     if (angle === 3) {         $("#rotation").rotate(360);         angle = -1;     }      angle++;  }); 

and html

<div style="position: relative;top: 0px;left: 0px;" id="rotation"> <img src="myimage.jpg" style="position: relative;max-height: 275px;max-width: 356px;" id="rotan"/> </div>  <a href="" id="rotate">rotate</a> 

there 4 solutions.

but first, let me explain problem. when using css transform. there property called transform-origin wich point transformation occur. if put figger on sheet , rotate sheet, figger rotation center.

now rotating div wich display:block. mean has 100% width , height equal content. knowing default transform-origin value 50%, that's why rotate that.

now, 4 solutions :

1. set div display inline-block. adjust width content.

2. calculate origin point in center of image.

3. rotate image

4. make div float

here information transform-origin.