JavaScriptでカーソルに続く画像をどのように回転させるのですか？

Question

私はマウスのカーソルに従っている画像を持っています。

HTML：

<img id="cow" src="https://icons.iconarchive.com/icons/gakuseisean/ivista-2/128/Alarm-Arrow-Right-icon.png" height="30px" width="30px" style="position: absolute; top: 50%; left: 50%;"/> 

Javascriptを：

var mouseXY = {}; 
$(document).on("mousemove", function(event) { 
    mouseXY.X = event.pageX; 
    mouseXY.Y = event.pageY; 
}); 
var iCow = $("#cow"); 
var cowInterval = setInterval(function() 
{ 
    var cowXY = iCow.position(); 
    var diffX = cowXY.left - mouseXY.X; 
    var diffY = cowXY.top - mouseXY.Y; 
    var newX = cowXY.left - diffX/1000; 
    var newY = cowXY.top - diffY/1000; 
    iCow.css({left: newX, top: newY}); 
}, 10); 

JSFiddle example

がどのように私は、カーソルの方向に画像を回転させることができますか？
私はtransform: rotate()でそれを行うことを試みた：

var cowInterval = setInterval(function() 
{ 
    var cowXY = iCow.position(); 
    var diffX = cowXY.left - mouseXY.X; 
    var diffY = cowXY.top - mouseXY.Y; 
    var newX = cowXY.left - diffX/1000; 
    var newY = cowXY.top - diffY/1000; 
    var tan = diffX/diffY; 
    var atan = Math.atan(tan); 
    iCow.css({left: newX, top: newY, transform: "rotate(" +((-1)*atan - Math.PI/2)+ "rad)"}); 
}, 10); 

が、失敗した

Answer 1

カーソルpostionを変更するときは、カーソルが実際に変更されたことを念頭に置いて、のみ（回転）変換CSSプロパティを変更する必要がありますポジション。私は、これはあなたが望むものであると仮定し

if(diffY > 0 && diffX > 0) { 

    atan += 180; 
    } 
else if(diffY < 0 && diffX > 0) { 

    atan -= 180; 
    } 

正しい方向に回転

は画像を作るためにこれら二つのif-else条件を追加します。

var mouseXY = {}; 
 
    $(document).on("mousemove", function(event) { 
 
     mouseXY.X = event.pageX; 
 
     mouseXY.Y = event.pageY; 
 
    }); 
 
    var iCow = $("#cow"); 
 
    var prevXY = {X: null, Y: null}; 
 
    var cowInterval = setInterval(function() 
 
    { 
 
    
 
     
 
     if(prevXY.Y != mouseXY.Y || prevXY.X != mouseXY.X && (prevXY.Y != null || prevXY.X != null)) { 
 
     
 
     var cowXY = iCow.position(); 
 
     var diffX = cowXY.left - mouseXY.X; 
 
     var diffY = cowXY.top - mouseXY.Y; 
 
     var tan = diffY/diffX; 
 
     
 
     var atan = Math.atan(tan)* 180/Math.PI;; 
 
     if(diffY > 0 && diffX > 0) { 
 
     
 
     \t atan += 180; 
 
     } 
 
     else if(diffY < 0 && diffX > 0) { 
 
     
 
     \t atan -= 180; 
 
     } 
 
     
 
     prevXY.X = mouseXY.X; 
 
     prevXY.Y = mouseXY.Y; 
 
     iCow.css({transform: "rotate(" + atan + "deg)"}); 
 
    } 
 
    }, 10);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="cow" src="https://icons.iconarchive.com/icons/gakuseisean/ivista-2/128/Alarm-Arrow-Right-icon.png" height="30px" width="30px" style="position: absolute; top: 50%; left: 50%;"/>