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); 
}