我想制作一个3D矩形(平行六面体),用户可以用箭头移动.它在Chrome中运行良好,但在Firefox中,一些转换(实际上很多)与Chrome不同.看看这个小提琴(这是我的整个代码),并在两个浏览器中进行比较,以便更好地理解.
因为第一个小提琴包含很多代码,我会简化它并选择一个随机奇怪的过渡.看看这个小提琴,然后按"向左"按钮或向左箭头一次.它工作正常,但当你再次按下它时,矩形旋转3次而不是1次.
这是Firefox的错误还是我做错了什么？
下面的代码就是你在简化的小提琴中找到的代码.
var position = 'show-front';
$('#left').bind('click', function() {
if (position == 'show-front') {
$('#box').removeClass().addClass('show-right');
position = 'show-right';
} else if (position == 'show-right') {
$('#box').removeClass().addClass('show-back-3');
position = 'show-back-3';
} else if (position == 'show-back-3') {
$('#box').removeClass().addClass('show-left');
position = 'show-left';
} else if (position == 'show-left') {
$('#box').removeClass().addClass('show-front');
position = 'show-front';
}
});
$(window).bind('keyup', function(event) {
switch (event.keyCode) {
case 37: // left
$('#left').click();
break;
}
});.container {
width: 150px;
height: 100px;
position: …