Question

代码太大了，无法写在这里，所以小提琴：http://jsfiddle.net/yZd3v/
问题：当我按下LEFT / RIGHT ARROW立方体旋转顺利，但是当我点击向上/向下箭头时，它会重置rotateY

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

jQuery 3d立方体不能顺利旋转

2 个答案: