Rotate image

To rotate image using handler only.

by Arun Valaven

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<script src="http://demo.prestalife.net/modules/customtextdesign/js/resizable-rotation.patch.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/css/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.css">
    <div id="image_box">
        <div id="rotate_handle">
        </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%;
        position: absolute;
        margin-left: 200px;
        margin-top: 100px;
        width:100px; 
        height: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;
    }
    
    .ui-resizable-handle{
        border: 3px solid greenyellow;
        cursor: pointer;
    }

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, rotate=false;

        dial.find("#rotate_handle").mousedown(function(e) {
            rotate = 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() { 
            rotate = false;
        });
        
        $(document).mousemove(function(e) {
            if(rotate) { 
                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)');
            }
        });
        
        $('#image_box').draggable().resizable({
            handles: 'ne, nw, se, sw' 
        });