jquery - jQuery 3d 立方体旋转不顺畅

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