jQuery的3D立方體不旋轉順暢

Question

代碼過於龐大的在這裏寫了這麼繼承人小提琴：http://jsfiddle.net/yZd3v/
問題：當我按下左/右箭頭立方體rotatesY順利，但是當我點擊向上/向下箭頭，它重置旋轉Y

if (key.keyCode == 37) { 
      // left 37 
      deg -= 10; 
      $('#cube').css('-webkit-transform','translateZ(-100px) rotateY('+deg+'deg)'); 
      return false; 
     } (more on jsfiddle) 

Answer 1

你忘了，你需要的是正在轉向兩個不同的軸。 見的jsfiddle更新：http://jsfiddle.net/yZd3v/1/

degX = 0; 
    degY = 0; 
    $(document).keydown(function(key){ 
     if (key.keyCode == 37) { 
      // left 37 
      degY -= 10; 
     } else if (key.keyCode == 39) { 
      // right 39 
      degY += 10; 
     } else if (key.keyCode == 38) { 
      // up 38 
      degX += 10; 
     } else if (key.keyCode == 40) { 
      // down 40 
      degX -= 10; 
     } 

     $('#cube').css('-webkit-transform','translateZ(-100px) rotateX('+degX+'deg) rotateY(' + degY+'deg)'); 
     return false; 
    }); 

注意到有你的程度兩個變量，而你旋既每次。

Answer 2

您可以使用$（'＃cube'）。css（{「transform」：「rotateY（」+ deg +「deg）」}）;在幾種情況下。我測試..

，並採取有助於http://css3.bradshawenterprises.com/transforms/

請看看這個。並得到一些幫助..

http://jsfiddle.net/j35Ad/

<div id="transDemo4" class="shadow hover"> 
<div id="rotateX">rotateX</div> 
<div id="rotateY">rotateY</div> 
<div id="rotateZ">rotateZ</div> 
<p class="center">Hover me</p> 
<div class="clear"></div> 
</div> 


#transDemo4 { 
    border: 1px solid #AAAAAA; 
    height: 190px; 
    margin: 0 auto 10px; 
    padding: 10px; 
    width: 400px; 
} 
.shadow { 
    box-shadow: 5px 5px 5px #AAAAAA; 
} 
#transDemo4 div:not(.clear) { 
    border: 1px solid blue; 
    float: left; 
    height: 130px; 
    margin: 10px 20px; 
    padding: 10px; 
    perspective: 800px; 
    perspective-origin: 50% 100px; 
    transition: all 2s ease-in-out 0s; 
    width: 70px; 
} 

.clear { 
    clear: both; 
} 

#transDemo4 div { 
    transition:all 2s ease-in-out; 
    perspective: 800px; 
    perspective-origin: 50% 100px; 
} 
#transDemo4:hover #rotateX { 
    transform:rotateX(180deg); 
} 
#transDemo4:hover #rotateY { 
    transform:rotateY(180deg); 
} 
#transDemo4:hover #rotateZ { 
    transform:rotateZ(180deg); 
}