SO - 16662036

by voigtan

HTML

<div id="apDiv1">
    <img src="http://docs.gimp.org/en/images/filters/examples/color-taj-sample-colorize.jpg" class="image"/>
    <div id="degree_value"></div>
</div>

CSS

#apDiv1 {
    position:absolute;
    width:400px;
    height:327px;
    z-index:1;
    left: 105px;
    top: 98px;
}

JavaScript

var img = $('.image');
if(img.length > 0){
    var offset = img.offset();
    var isMouseDown;
    function mouse(evt){
        isMouseDown = evt.type === "mousedown";
        evt.preventDefault();
    }
    function mousemove(evt) {
        evt.preventDefault();
        if(isMouseDown) {
            var center_x = (offset.left) + (img.width()/2);
            var center_y = (offset.top) + (img.height()/2);
            var mouse_x = evt.pageX; var mouse_y = evt.pageY;
            var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
            var degree = (radians * (180 / Math.PI) * -1) + 90; 
            img.css('-moz-transform', 'rotate('+degree+'deg)');
            img.css('-webkit-transform', 'rotate('+degree+'deg)');
            img.css('-o-transform', 'rotate('+degree+'deg)');
            img.css('-ms-transform', 'rotate('+degree+'deg)');
            img.css('transform', 'rotate('+degree+'deg)');
            $("#degree_value").html(degree);
        }
    }
    $(document)
        .mousedown(mouse)
        .mouseup(mouse)
        .mousemove(mousemove);
}