in

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>
<html>
<head>
<style>
.box{
    background-color: black;
    width: 30px;
    height: 30px;
    
    position: absolute;
    left: 200px;
    top: 200px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body>

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



<script>

$(document).mousemove(function(e){
/*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});
});


</script>


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

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

</body>
</html>



Source: https://stackoverflow.com/questions/70717263/rotating-a-moving-image-with-jquery

Boilerplate codes including Superbase settings for Flutter

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