title: Rotate element to click position
body: <p>I have a project with a circle that, when clicked, rotates to a predefined position.  It is almost there, but the last requirement is that it always rotates clockwise to the marker.  I just can't seem to figure out how to get the right value so that when i set css transform:rotate(Xdeg), it will always go clockwise.  Keeping the angle between 0 and 360 would also be a plus for another piece of this, but not necessary.</p>
  
  <p>See this fiddle, javascript below as well    <a href="http://jsfiddle.net/2g17cjuL/1/" rel="nofollow">Rotation</a></p>
  
  <pre><code>$(function () {
  $('body').on('click', '#graph1', function (e) {
  
      console.log('********************');
      //get mouse position relative to div and center of div for polar origin
      var pos = getMousePosAndCenter(e, 'graph1');
  
      //get the current degrees of rotation from the css
      var currentRotationDegrees = getCSSRotation('#graph1');
      console.log('CSS Rotation Value: ' + currentRotationDegrees);
  
      //current rotation in radians
      var currentRotationRadians = radians(currentRotationDegrees);
  
      //radians where clicked
      var clickRadiansFromZero = Math.atan2(pos.y - pos.originY, pos.x - pos.originX);
  
      //degrees the click is offset from 0 origin
      var offsetDegrees = degrees(clickRadiansFromZero);
  
      //how many degrees to rotate in css to put the mouse click at 0
      var degreesToZero;
      if (offsetDegrees &gt;= 0)
          degreesToZero = currentRotationDegrees - Math.abs(offsetDegrees);
      else
          degreesToZero = currentRotationDegrees + Math.abs(offsetDegrees);
  
      console.log("Degrees to Zero: " + degreesToZero);
  
      //distance in pixels from origin
      var distance = calculateDistance(pos.originX, pos.originY, pos.x, pos.y);
  
      console.log("Distance From Origin(px): " + distance);
  
      $('#graph1').css('transform','rotate(' + degreesToZero + 'deg)')
  });
  
  });
  
  function getMousePosAndCenter(e, id) {
      var rect = document.getElementById(id).getBoundingClientRect();
      return {
          x: (((e.clientX - rect.left) / rect.width) * rect.width) + 0.5 &lt;&lt; 0,
          y: (((e.clientY - rect.top) / rect.height) * rect.height) + 0.5 &lt;&lt; 0,
          originY: (rect.height / 2),
          originX: (rect.width / 2)
      };
  }
  
  function radians(degrees) {
      return degrees * Math.PI / 180;
  };
  
  function degrees(radians) {
      return radians * 180 / Math.PI;
  };
  
  function calculateDistance(originX, originY, mouseX, mouseY) {
      return Math.floor(Math.sqrt(Math.pow(mouseX - originX, 2) + Math.pow(mouseY - originY, 2)));
  }
  
  function getCSSRotation(id) {
      var matrix = $(id).css('transform');
      var values = matrix.split('(')[1],
      values = values.split(')')[0],
      values = values.split(',');
  
      var a = values[0];
      var b = values[1];
      var c = values[2];
      var d = values[3];
  
      var cssRotation = degrees(Math.atan2(b, a));
      return cssRotation;
  }
  </code></pre>