title: Rotate div to mouse position
body: <p>I want to let a div rotate to the point where the mouse will be,</p>
  
  <p>So when my mouse is left it have to show <code>&lt;-</code> when my mouse is to the right it have to show <code>-&gt;</code></p>
  
  <p>This needs to be in any direction!</p>
  
  <p>Does anyone have a solution?</p>
  
  <p>EDIT:</p>
  
  <pre><code>&lt;style&gt;
      body {
          height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
      }
  &lt;/style&gt;
  
  &lt;div id="arrow"&gt;&amp;gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      var arrow = document.querySelector("#arrow");
      var arrowRects = arrow.getBoundingClientRect();
      var arrowX = arrowRects.left + arrowRects.width / 2;
      var arrowY = arrowRects.top + arrowRects.height / 2;
  
      addEventListener("mousemove", function(event) {
          arrow.style.transform = "rotate(" + Math.atan2(event.y - arrowY, event.x - arrowX) + "rad)";
      });
  &lt;/script&gt;
  </code></pre>