Rotating a moving image with jquery

I’m having some problems causing in image to rotate properly after it follows the cursor. I think that it is rotating based on it’s original location but I am not sure.

Any chance to make it rotate a full 360 degrees regardless of its final location?

original code:

<!DOCTYPE html>
    background-color: black;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 200px;
    top: 200px;

<script src=""></script>


<div class="box" id="image">  </div>


/*duration determines the speed of the animation (in this case, the speed to which prgm follows)*/
    $("#image").stop().animate({left:e.pageX, top:e.pageY}, {duration: 5000});


let box = document.querySelector(".box");
let boxBoundingRect = box.getBoundingClientRect();
let boxCenter= {
    x: boxBoundingRect.left + boxBoundingRect.width/2, 
  y: + boxBoundingRect.height/2

document.addEventListener("mousemove", e => {
    let angle = Math.atan2(e.pageX - boxCenter.x, - (e.pageY - boxCenter.y) )*(180 / Math.PI);  = `rotate(${angle}deg)`;  



Boilerplate codes including Superbase settings for Flutter

Is it better to do a BatchWriteItem or several individual UpdateItem operations in DynamoDB?