3Dキューブが期待通りに回転しないのはなぜですか？

Question

私はあなたの顔をスワイプすると回転する3次元のダイスをしています。問題は、いくつかのケースで本当に変わっているということです。

$(function() { 
 
    
 
    var X = 0, 
 
    Y = 0; 
 
    
 
    var hammertime = new Hammer($(".thirdDimension")[0], {domEvents: true}); 
 
    
 
    hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL }); 
 
    
 
    function rotate(what) { 
 
    switch (what) { 
 
     case "X": 
 
     $(".cube").css("transform", "rotateX(" + X + "deg) rotateY(" + Y +"deg)"); 
 
     break; 
 
     case "Y": 
 
     $(".cube").css("transform", "rotateY(" + Y +"deg) rotateX(" + X + "deg)"); 
 
     break; 
 
    } 
 
    $("#debug").html($("#debug").html() + $(".cube").attr("style") + "<br>").scrollTop($("#debug")[0].scrollHeight); 
 
    } 
 
    
 
    $(".thirdDimension").on("swipeleft", function(e){ 
 
    Y -= 90; 
 
    rotate("Y"); 
 
    }); 
 

 
    $(".thirdDimension").on("swiperight", function(e){ 
 
    Y += 90; 
 
    rotate("Y"); 
 
    }); 
 
    
 
    $(".thirdDimension").on("swipeup", function(e){ 
 
    X += 90; 
 
    rotate("X"); 
 
    }); 
 
    
 
    $(".thirdDimension").on("swipedown", function(e){ 
 
    X -= 90; 
 
    rotate("X"); 
 
    }); 
 
    
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 
html, body { 
 
    height: 100%; 
 
    font-family: sans-serif; 
 
} 
 
.tableContainer, .vcenter { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.tableContainer { 
 
    display: table; 
 
} 
 
.vcenter { 
 
    height: 100%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.thirdDimension { 
 
    perspective: 500px; 
 
\t perspective-origin: 50% 100px; 
 
} 
 
.cube { 
 
    margin: 0 auto; 
 
    position: relative; 
 
\t width: 200px; 
 
    height: 200px; 
 
\t transform-style: preserve-3d; 
 
} 
 
.cube div { 
 
\t position: absolute; 
 
\t width: 200px; 
 
\t height: 200px; 
 
    box-shadow: inset 0 0 30px black; 
 
    font-size: 72pt; 
 
    padding-top: 35px; 
 
    text-align: center; 
 
    background-color: black; 
 
} 
 

 
.right { 
 
    transform: rotateY(-270deg) translateX(100px); 
 
\t transform-origin: top right; 
 
} 
 
.left { 
 
\t transform: rotateY(270deg) translateX(-100px); 
 
\t transform-origin: center left; 
 
} 
 
.up { 
 
\t transform: rotateX(90deg) translateY(-100px); 
 
\t transform-origin: top center; 
 
} 
 
.down { 
 
\t transform: rotateX(-90deg) translateY(100px); 
 
\t transform-origin: bottom center; 
 
} 
 
.front { 
 
\t transform: translateZ(100px); 
 
} 
 
.back { 
 
\t transform: translateZ(-100px) rotateY(180deg); 
 
} 
 
.cube { 
 
    -webkit-transition: .3s all linear; 
 
    cursor: pointer; 
 
} 
 
.cube div:after { 
 
    display: block; 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    content: ""; 
 
    border: 1px solid; 
 
} 
 
.front:after { 
 
    top: 0; 
 
    right: 0; 
 
    background-color: green; 
 
} 
 
.back:after { 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color: blue; 
 
} 
 
.right:after { 
 
    top: 0; 
 
    left: 0; 
 
    background-color: red; 
 
} 
 
.left:after { 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: DarkOrange; 
 
} 
 
.up:after { 
 
    right: 0; 
 
    bottom: 0; 
 
    background-color: white; 
 
} 
 
.down:after { 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: yellow; 
 
} 
 
#debug { 
 
    position: fixed; 
 
    background-color: cyan; 
 
    overflow: auto; 
 
    height: 50px; 
 
    width: 100%; 
 
} 
 
/* 
 
.cube { 
 
    animation: linear 5s rotate infinite; 
 
} 
 
@-webkit-keyframes rotate { 
 
    0% { 
 
    transform: rotateX(0deg) rotateY(0deg); 
 
    } 
 
    100% { 
 
    transform: rotateX(360deg) rotateY(720deg); 
 
    } 
 
} 
 
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<div id='debug'></div> 
 
<div class='tableContainer'> 
 
    <div class='vcenter'> 
 
    <div class='thirdDimension'> 
 
     <div class='cube'> 
 
     <div class='up'></div> 
 
     <div class='front'></div> 
 
     <div class='right'></div> 
 
     <div class='left'></div> 
 
     <div class='back'></div> 
 
     <div class='down'></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

EDIT：あなたはスニペットやスワイプ左を2回実行した場合たとえば、その後、ここで

はコードです...それは狂気の回転を行い、下にスワイプ：このリンク： http://greensock.com/forums/topic/7811-3d-rotation-fixed-axsis/は、回転の順序が重要であると言います。私は少しコードを変更しましたが、予期せず回転し続けます...

Answer 1

あなたの問題は、どのコーディングミスよりも回転の概念をどのようにしていますか？

Y（90）を回転させてXを回転させると（90）、回転X（90）になるまでにX軸が90度回転しているため、画面外。だからあなたのことは、その特定のインスタンスで2d回転をしているように見えます。

し、さらにそれを取るために、ユーザーは今右に左スワイプすれば、彼らは実際にはZ軸に沿ってスワイプしており、あなたがこの問題を解決するにはZ.

を回転させる必要がある、あなたはを追跡する必要がありますあなたが行った回転とより動的な方法でキューブにユーザーインターフェイスをマップします。左から右にスワイプすることは必ずしもYを回転させることを意味するわけではなく、現在は左から右に向いている軸に沿ってが回転することを意味します。

rubikの立方体などを見つけ、軸ごとの辺にラベルを付ける（赤い辺がX軸など）ようにして、スワイプをシミュレートすると、軸が見えるようになります。キューブの周りを移動します。

Answer 2

まず："X"または"Y"のいずれかのために設定transform異なる方法は、大規模な回転を引き起こしていました。あなたは、常にスワイプの方向に回転させるキューブをご希望の場合は信じて

$(".cube").css("transform", "rotateX(" + X + "deg) rotateY(" + Y +"deg)"); 

：私はにそれらの両方を変更しました。もしそうならば、またはであれば、上記のコードを変更する必要があります。

---

第二：あなたが向きを変えているキューブをスピン。 x軸は決して台無しになることはありませんが、実際に気付かないうちにy軸とz軸が切り替わります。

今、あなたは、ミックスにrotateZを追加することができます。

$(".cube").css("transform", "rotateX(" + X + "deg) rotateY(" + Y +"deg) rotateZ(" + Z + "deg)"); 

私は例を提供するために、このCodePenのコードhereを変更しました。 私は問題を明らかにしたが、それを完成させる時間がないので、私はそれを完了していない。従って - （90 +）

$(function() { 

    var X = 0, 
     Y = 0, 
     Z = 0; 

    var hammertime = new Hammer($(".thirdDimension")[0], {domEvents: true}); 

    hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL }); 

    function rotate() { 
     $(".cube").css("transform", "rotateX(" + X + "deg) rotateY(" + Y +"deg) rotateZ(" + Z + "deg)"); 
     $("#debug").html($("#debug").html() + $(".cube").attr("style") + "<br>").scrollTop($("#debug")[0].scrollHeight); 
    } 

    $(".thirdDimension").on("swipeleft", function(e){ 
     //Y -= 90; 
     check(-90); 
     rotate(); 
    }); 

    $(".thirdDimension").on("swiperight", function(e){ 
     //Y += 90; 
    check(90); 
    rotate(); 
    }); 

    $(".thirdDimension").on("swipeup", function(e){ 
     X += 90; 
     rotate(); 
    }); 

    $(".thirdDimension").on("swipedown", function(e){ 
     X -= 90; 
     rotate(); 
    }); 

    function check(num) { 
     var temp = Math.abs(X % 360); 
      switch (temp) { 
       case 0: 
        console.log(temp); 
        Y += num; 
        break; 
       case 90: 
        console.log(temp); 
        Z -= num 
        break; 
       case 180: 
        console.log(temp); 
        Y -= num; 
        break; 
      case 270: 
       console.log(temp); 
       Z -= num; 
       break; 
      } 
    } 

}); 

あなたはy軸（Math.abs(Y % 360))）およびおそらくz軸を確認し、Y軸、Z軸のいずれかを回転させる必要があります。

これはほとんどの場合動作しますが、回転させる正しい軸を決定する際に微調整が必​​要です。がんばろう。