Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  
  <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>
  
  
</body>
</html>
 
$(function() {
    var dragging = 0;
    var target     = $('#target');
    var mainTarget = $('#mainTarget');
    var elOfs = mainTarget.offset();
    var cent  = {X: mainTarget.width()/2, Y: mainTarget.height()/2};    
    var elPos = {X: elOfs.left, Y: elOfs.top};
    target.mousedown(function() {
        dragging = true;
    });
    $(document).mouseup(function() {
        dragging = 0;
    }).mousemove(function(e) {     
      if(dragging) {
         var mPos    = {X: e.pageX-elPos.X, Y: e.pageY-elPos.Y};
         var getAtan = Math.atan2(mPos.X-cent.X, mPos.Y-cent.Y);
         var getDeg  = -getAtan/(Math.PI/180) + 135; 
         mainTarget.css({transform: 'rotate(' + getDeg + 'deg)'});
      }
    });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers