Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
​
​
​
    <h1>Rotation</h1>
​
    <div id="graph1"></div>
    <div id="marker">Wherever you click, it rotates to here</div>
​
​
  </body>
</html>
 
#graph1 {
    position:absolute;
    top:100px;
    left:50px;
    width:400px;
    height:400px;
    background:url('http://www.showmethemath.com/Math_Practice/coordinateGridSquareScaleOf2.gif') 50% / cover;
    transition:transform 2s ease;
    transform:rotate(30deg);
    transform-origin:50% 50%;
    border-radius:50%;
}
#marker {
    position: absolute;
    top:300px;
    left:450px;
    border-top:1px solid black;
}
​
 
function getCSSRotation( $el ) {
  var matrix = $el.css('transform'),
      v = matrix.split('(')[1].split(')')[0].split(','),
      rds = Math.atan2(v[1], v[0]);
  return rds*180/Math.PI <<0; // Degrees
}
​
var $EL = $("#graph1"),
  w = $EL.width(),
  r = w/2,                             // Radius
  x = parseInt($EL.css("left"), 10),
  y = parseInt($EL.css("top"),  10),
  d = getCSSRotation( $EL );           // Initial degree (ONLY ONCE!)
​
$EL.on("click", function(e){
  var mx = e.clientX-x-r,              // Click coord X
      my = e.clientY-y-r,              // Click coord Y
      rds = Math.atan2(-my, -mx),      // Radians
      md = (rds*180/Math.PI<<0) + 180; // Mouse Degrees
  d += (360-md);                       // always increment to insanity!!
  $(this).css({transform:"rotate("+ d +"deg)"});
});
​
​
​
Output

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

Dismiss x
public
Bin info
roXonpro
0viewers