CSS 3Dで生成されたキューブを回転させて回転させる

Question

CSSで作られた3D生成キューブを持っていて、ホバリングすると完全に回転します。

私が必要とするのは、マウスで回転させるドラッグ可能な機能を追加することです。

は、これまでのところ私はこれを持っている：

/*.box-scene:hover .box { 
    -webkit-transform: rotateY(-90deg); 
}*/ 

私がしようとするJQueryUIからドラッグ可能な関数を使用する：あなたは、以下のCSSのコメントを解除する必要がホバー仕事をするためには

JSFIDDLE

それは動作させるが、何とか動作していない。

PS：私はY軸で回転するだけです。

ヘルプが有効になります。

Answer 1

私はあなたが望むものはドラッグ可能ではないと思います。そのウィジェットを使用すると、ページ上でオブジェクトを動かすことができます。マウスをクリックして移動することができ、マウスをどれだけ遠く移動したかに比例してキューブが回転するように見えるように見えます。この例では

var dragging = false; 
var originalX; 
cube.mouseDown(function(e){ 
    originalX = e.pageX; 
    dragging = true; 
}); 
cube.mouseUp(function(e){ 
    dragging = false; 
}); 
cube.mouseMove(function(e){ 
    if (dragging){ 
     var DeltaX = e.pageX - originalX; 
     var rotation = CalculateRotationDegrees(DeltaX); 
     cube.css('transform',rotation); 
    } 
}); 

、メソッドのCalculateRotationDegreesは、ユーザーがマウスを移動した距離を取る：私は、私は次のようなJavaScriptを示唆している、純粋なCSSでことを行う方法を知りませんその距離に基づいてキューブがどれだけ回転するかを把握します。

Answer 2

考えられるのは、マウスボタンが押されたかどうかを示すブール変数です。マウスが動いたときに回転を調整します。

var mouseDown = false; 

var mouseButtonDown = function() { 
    mouseDown = true; 
} 

var mouseButtonUp = function() { 
    mouseDown = false; 
} 

var mouseMove = function (event) { 
    if(mouseDown) { 
     // get mouse coordinates and do rotation in jquery 
    } 
} 

HTML： <div onmousedown="mouseButtonDown" onmouseup="mouseButtonUp" onmousemove="mouseMove"></div>

Answer 3

[OK]をので、私は最終的に働いてしまいました。

明らかに、JSFiddleはSSLなしでリクエストされた場合、外部リソースをロードしないというエラーがありました。

最初に読み込まれたコードは実際には正しいです。

最終作業フィドルは次のとおりです。

JSFiddle

決勝Javascriptを：

var offset = 0, startX; 
var elem = document.getElementById("box"); 
$('#box-scene').on('mousedown', function (e) { 
    startX = e.pageX - offset; 
}) 
.on('mouseup', function() { 
    startX = null; 
}) 
.on('mousemove', function (e) { 
    if(startX) { 
     offset = e.pageX - startX; 
     elem.style['-webkit-transform'] = 'rotateY(-' + offset + 'deg)'; 
    } 
}); 

あなたの助けに@Andrewと@Armandマリーをありがとうございます。

これは今後の参考に利用できます。