回転した要素をJavaScriptの回転方向に移動

Question

これは、Firefoxに問題はありませんが、Firefoxは問題なく動作します。オペラには、私がアドレッシングする必要がある追加の問題があります。IExplore私はまだテストを気にしませんでした（今はかなり正直です）。

私はJqueryRotate（要素の回転を設定）し、左右の矢印キーを使用して上から見た車の画像を回転させるつもり実験を有します。車はjavascript/jqueryを使用してセンターに設定されています（問題ありません）。上向きの矢印が使用されている場合、車はそれが指す方向に上がります。ここで問題が発生します。あなたが回ったり、同時に運転することができないという事実を気にしないでください。これは修正されます。しかし、私はそれを回してから前に進んだ後、少し動いていますか？どうして？

のjavascript：

var angle = 0; 
var degreeInRadians = 2*Math.PI/360; 
var realX = 0; 
var realY = 0; 

$(document).ready(function(){ 
    placeInCenter($("#carImage")); 
}); 

$(document).keydown(function(e){ 
    //left 
    if (e.keyCode == 37) { 
     rotateLeft($("#carImage")); 
     return false; 
    } 
    //up 
    if (e.keyCode == 38) { 
     moveForward($("#carImage"),1); 
     return false; 
    } 
    //right 
    if (e.keyCode == 39) { 
     rotateRight($("#carImage")); 
     return false; 
    } 
    //down 
    if (e.keyCode == 40) { 
     //TODO move the car forward 
     return false; 
    }  
}); 



function placeInCenter(element) { 
    // get viewport height and width and divide it by 2 
    centerY = window.innerHeight/2; 
    centerX = window.innerWidth/2; 

    //set absoulte positioning on element 
    $(element).css("position", "absolute"); 
    // place the element 
    $(element).offset({ top: centerY, left: centerX }); 
    //update realX and realY 
    realX = centerX; 
    realY = centerY; 
} 

function rotateRight(element) { 
    if(angle <360) { 
     angle++; 
    } 
    else { 
     angle=0; 
    } 
    element.rotate(angle); 
} 

function rotateLeft(element) { 
    if(angle > 0) { 
     angle--; 
    } 
    else { 
     angle=359; 
    } 
    element.rotate(angle); 
} 

function moveForward(element, speed) { 
    //move the element to polar cordinate (speed,angle) 
    realX = realX + Math.cos(degreeInRadians * angle); 
    realY = realY + Math.sin(degreeInRadians * angle); 

    $(element).offset({ top: realY, left: realX }); 
} 

デモ：http://www.perandersen.no/sandbox/fromAbove/

Answer 1

問題は、WebKitのは、Firefoxが本来のバウンディングボックスからそれを相殺しながら、回転要素のバウンディングボックスからのオフセットを設定するようだということです回転を適用する。

車の隅に指を置き、回転させて前方に移動します。車の境界ボックスの左上隅（回転後の最も左と上の点）が指で整列します。

あなたの代わりに.offset()の.css({ top: ... left: })を使用して、以下のCSSスタイルを設定した場合には、FirefoxやWebKitの中で正常に動作ようだ：

#carImage { 
    position: relative; 
    margin-left: -100px; 
    margin-top: -51px;  
} 

デモ：http://jsfiddle.net/jtbowden/2aeyP/2/