jquery - jQuery と CSS3 を使用して、要素を独自の軸を中心に両方向に回転させる

Question

レコードプレーヤーを実装し、時計回りに回転させることに成功しましたが、両方の方向に回転させたいと思っています。:-)

主にiPadで動作させる必要があるため、見つけたスクリプトを適応させ、いくつかのタッチイベントを追加しました。

外観は次のとおりです。

function getDistance(x1,y1,x2,y2){
    return Math.sqrt((x1-x2) * (x1-x2) + (y2-y1) * (y2-y1));
}
var div = $("#turntable");
var rotation = 0; 
var isDragging = false;

div.bind('touchstart mousedown', function(event) {
    event.preventDefault();
    isDragging = true;
    lastX = position(event).x;
    lastY = position(event).y;
});
div.bind('touchend mouseup', function(event) {
    event.preventDefault();
    isDragging = false;
});
div.bind('touchmove mousemove', function(event) {
    if (isDragging) {
        var curX = position(event).x;
        console.log(curX);
        var curY = position(event).y;
        console.log(curY);   
        rotation += getDistance(curX,curY,lastX,lastY); 
        var rotateCSS = 'rotate(' + rotation + 'deg)';
        $(this).css({
            '-webkit-transform': rotateCSS
        });  
        lastX = curX;
        lastY = curY;
    }
})

touchmove イベント内に、回転している方向を確認する if が必要ですが、実際にはわかりません。どんな助けでも大歓迎です！または、別のアプローチがある場合は、それを聞いてうれしいです。

ここに、スクリプトを取得した元の jsfiddle へのリンクがあります: jsfiddle