title: How do I rotate an image based on my cursor position, and have it work?
body: <p>I've looked around for any questions similar to this one, and haven't really found anything other than <strong><a href="https://stackoverflow.com/questions/9972449/rotating-an-element-based-on-cursor-position-in-a-separate-element">this</a></strong>.</p>
  
  <p>I've tried using the code above, and have failed miserably on my own.</p>
  
  <p><i><h1>Here is a working Snippet</h1></i></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var img = $('.image');
  if (img.length &gt; 0) {
    var offset = img.offset();
  
    function mouse(evt) {
      var center_x = (offset.left) + (img.width() / 2);
      var center_y = (offset.top) + (img.height() / 2);
      var mouse_x = evt.pageX;
      var mouse_y = evt.pageY;
      var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
      var degree = (radians * (180 / Math.PI) * -1) + 90;
      img.css('-moz-transform', 'rotate(' + degree + 'deg)');
      img.css('-webkit-transform', 'rotate(' + degree + 'deg)');
      img.css('-o-transform', 'rotate(' + degree + 'deg)');
      img.css('-ms-transform', 'rotate(' + degree + 'deg)');
    }
    $(document).mousemove(mouse);
  }
  
  //Code is directly from https://stackoverflow.com/questions/9972449/rotating-an-element-based-on-cursor-position-in-a-separate-element</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#header {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-weight: lighter;
    text-shadow: 0 0 3px #777;
    margin-top: 75px;
    text-align: center;
    min-width: 800px;
  }
  #main-circle {
    text-align: center;
    min-width: 800px;
    z-index: 2;
  }
  #needle {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-weight: lighter;
    text-shadow: 0 0 3px #777;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;head&gt;
    &lt;h1 id="header"&gt;It works here, but not on my page!&lt;/h1&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="main-circle"&gt;
      &lt;img src="@Resources/@img/UnitCircle.png"&gt;
    &lt;/div&gt;
    &lt;div id="needle"&gt;
      &lt;img class="image" src="@Resources/@img/Needle.png"&gt;
      &lt;p&gt;These are direct links to the images on my PC, but they'll do for now...&lt;/p&gt;
      &lt;p&gt;I'm using Dreamweaver CS6, and I have my code written as shown, and using jQuery.min 1.11.1&lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This works <strong><i>perfectly</i></strong> in the snippet!  No issues at all!</p>
  
  <p><b>BUT</b></p>
  
  <p>The second I take this code and put it into Dreamweaver, that's when nothing is working.  I know for a fact that jQuery <strong>is</strong> running on my version of the code (I made a test to see if jQuery would change some text, and it did).  I've also taken the jQuery code from above and tried to place it in the HTML code, and that still didn't work :/</p>
  
  <p>Is jQuery just not wanting to run this?  Is HTML having trouble with this?  Does the code flat out hate me?</p>
  
  <p>Thanks in advance!</p>
  
  <p>–  <i>Emir Čurtović</i></p>