<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2 class="well">turn image</h2> <div id="main"><div id="img"></div></div> <div id="info"> <span></span><br/> <span></span> </div> <br> <div class="well">Turn image mouse move</div> </div> </div>

div#main { width:500px; height:500px; border:2px #000 solid; } div#img { width:94px; height:119px; overflow:hidden; top:50%; left:50%; margin-left:-45px; margin-top:-60px; position:relative; background-image:url('http://imgur.com/3UPki.png'); background-position:0;} div#info { position: absolute; bottom:0; left:0; }

$(function() { var position = $("div#img").position(), mouseX, mouseY, imgX, imgY, degree; imgX = position.left; imgY = position.top; $("#main").mousemove(function(e) { // degree is arctan y over x (soh,cah,toa) degree = Math.atan2((e.pageY - imgY),(e.pageX - imgX))*(180 / Math.PI); degree = (degree - 90) % 360; // jQuery normalizes pageX and pageY // transfrom from -180 to 180 ==> 0 to 360 if (degree < 0) degree = 180 + (180 - (Math.abs(degree))); rotate(degree); $("span:first").html("Segment: " + (9 - Math.floor(degree / 36))); $("span:last").html("Degree: " + Math.floor(degree)); }); function rotate(degree) { var off = 9 - Math.floor(degree / 36); $("div#img").css("background-position",-off*94); } });