JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="mainTarget">
<img src="http://myreaxns.com/wp-content/uploads/2013/03/priyanka-chopra-image.jpg" width="300" class="mainTarget" />
<div id="target">&nbsp;</div>
</div>

CSS

#mainTarget{
    width:300px; 
    height:200px; 
    position:relative;
    top:120px; 
    left:25%
}

.mainTarget{position:absolute; width:300px; height:200px;}

#target{
    position:absolute;
    height:20px;
    width:20px;
    background:url(http://files.softicons.com/download/system-icons/human-o2-icons-by-oliver-scholtz/png/128x128/actions/object-rotate-left.png) no-repeat top center #ffffff;
	background-size:100%;
    cursor:pointer; 
    z-index:1; 
    top:0; 
    right:0;    
}

JavaScript

var dragging = false

$(function() {
    var target = $('#target');
    var mainTarget = $('#mainTarget');
	var offset = mainTarget.offset();
    target.mousedown(function() {
        dragging = true
    })
    $(document).mouseup(function() {
        dragging = false
    })
    $(document).mousemove(function(e) {
        if (dragging) {

			var center_x = (offset.left) + (mainTarget.width()/2);
			var center_y = (offset.top) + (mainTarget.height()/2);
			var mouse_x = e.pageX; var mouse_y = e.pageY;
			var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
			var degree = (radians * (180 / Math.PI) * -1) + 120; 	
            mainTarget.css('-moz-transform', 'rotate(' + degree + 'deg)');
            mainTarget.css('-moz-transform-origin', '50% 50%');
            mainTarget.css('-webkit-transform', 'rotate(' + degree + 'deg)');
            mainTarget.css('-webkit-transform-origin', '50% 50%');
            mainTarget.css('-o-transform', 'rotate(' + degree + 'deg)');
            mainTarget.css('-o-transform-origin', '50% 50%');
            mainTarget.css('-ms-transform', 'rotate(' + degree + 'deg)');
            mainTarget.css('-ms-transform-origin', '50% 50%');
        }
    })
});