Rotate image

To rotate image using handler only.

by Arun Valaven

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <div>
    <div id="image_box">
        <div id="rotate_handle">
        </div>
    </div>
</div>
  
  dial.offset().left: <span id="left"></span><br>
  dial.offset().top: <span id="top"></span><br>
  dial.centerX: <span id="centerX"></span><br>
  dial.centerY: <span id="centerY"></span><br>
  pageX: <span id="pageX"></span><br>
  pageY: <span id="pageY"></span><br>
  offset: <span id="offset"></span><br>
  newOffset: <span id="newOffset"></span><br>
  RAD2DEG: <span id="RAD2DEG"></span><br>
  r: <span id="r"></span><br>

CSS

#image_box{
    background: url('http://placehold.it/80x80/c9112d/fff&text=Image');
    background-size: 100% 100%;
    width:100px; 
    height:100px;
    margin-left: 200px;
    margin-top: 100px;
    border: 4px solid white;
    }
    
#image_box:hover {border: 4px solid black;}

#rotate_handle { 
        background: url('https://s32.postimg.org/re2hwf3fp/rotate_handle_down.png') no-repeat;
        background-size: 100% 100%;
        width:20px;
        height:20px;
        margin-left: -22px;
        margin-top: -22px;
    }

JavaScript

var RAD2DEG = 180 / Math.PI;  

        var dial = $("#image_box");

        $('#left').text(dial.offset().left);
        $('#top').text(dial.offset().top);
        dial.centerX = dial.offset().left + dial.width()/2;
        dial.centerY =  dial.offset().top + dial.height()/2;
        $('#centerX').text(dial.centerX);
        $('#centerY').text(dial.centerY);

        var offset, dragging=false;

        dial.mousedown(function(e) {
            dragging = true;
            offset = Math.atan2(dial.centerY - e.pageY, e.pageX - dial.centerX);
            $('#pageX').text(e.pageX);
            $('#pageY').text(e.pageY);
            $('#offset').text(offset);
        });

        $(document).mouseup(function() { 
            dragging = false;
        });
        
        $(document).mousemove(function(e) {
            if(dragging) { 
                var newOffset = Math.atan2(dial.centerY - e.pageY, e.pageX - dial.centerX);
                $('#newOffset').text(newOffset);
                var r = (offset - newOffset) * RAD2DEG;
                $('#RAD2DEG').text(RAD2DEG);
                $('#r').text(r);
                dial.css('-webkit-transform', 'rotate(' + r + 'deg)');
                dial.css('transform', 'rotate(' + r + 'deg)');
                $('#box').css('-webkit-transform','rotate(' + r + 'deg)');
                $('#box').css('transform','rotate(' + r + 'deg)');
            }
        });