Поворот дел до положения курсора мыши

Question

Я хочу, чтобы позволить ДИВУ повернуть до точки, где мышь будет,

Так что, когда моя мышь оставила его надо показать <-, когда моя мышь к праву должно показать ->

Это должно быть в любом направлении!

У кого-нибудь есть решение?

EDIT:

<style> 
    body { 
     height: 100vh; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
     overflow: hidden; 
    } 
</style> 

<div id="arrow">&gt;</div> 

<script type="text/javascript"> 
    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)"; 
    }); 
</script> 

Answer 1

Вы можете прослушивать события перемещения мыши, чтобы получить позицию курсора. Затем используйте поворот для поворота стрелки.

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.clientY - arrowY, event.clientX - arrowX) + "rad)"; 
 
});

body { 
 
    height: 100vh; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    overflow: hidden; 
 
}

<div id="arrow">&gt;</div>