title: Rotate a div towards the direction of the mouse using atan2()
body: <p>I would like the mouse to <code>align</code> with the <code>top</code> of the div and the div should <code>rotate</code> when the mouse moves with the top part of the div aligned with the mouse. I want to use <code>atan2</code>. It should look something like <a href="https://www.khanacademy.org/computer-programming/atan2/1244274107" rel="nofollow">this</a>.</p>
  
  <p>Javascript:</p>
  
  <pre><code>$(function() {
      var stick = $(".stick"), sHeight = stick.outerHeight(), 
                  sWidth = stick.outerWidth(), atan,
                  sTop = stick.offset().top, sLeft = stick.offset().left;
  
      $(document).on("mousemove", function(e) {
          // console.log(e.pageX, " ", e.pageY)
          atan = Math.atan2(e.pageY - sTop , e.pageX - sLeft ) 
          console.log(atan)
          stick.css({"transform" : "rotate("  + atan +  "rad)"} )
      })
  })
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.wrapper{
      width: 500px;
      height: 400px;
      position: relative;
      border:1px solid green;
  }
  .stick{
      width: 3px;
      height: 200px;
      position: absolute;
      left: 50%;
      top: 50%;
      background: green;
      transform: rotate(90deg);
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="stick"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>