The following code snippet demonstrates how to rotate an image element using jQuery:
$(document).ready(function(){
var player = $('#player');
$(window).on('mousemove', function (e) {
var p1 = {
x: player.offsetLeft,
y: player.offsetTop
};
var p2 = {
x: e.offsetX,
y: e.offsetY
};
var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
if(angleDeg >= 360){
angleDeg -= 360;
}
player.css('-webkit-transform', 'rotate(' + angleDeg + 'deg)');
});
});
However, the rotation does not occur as expected. Alternatively, when utilizing the code below, the image will follow the mouse cursor:
$(document).mousemove(function(e){
$("#player").css({left:e.pageX, top:e.pageY});
});
It seems like I am only able to move the image rather than rotate it. For a live demonstration, please visit this JSFiddle link.
Your assistance in resolving this issue would be greatly appreciated. Thank you!