我想制作一个3D矩形(平行六面体),用户可以用箭头移动.它在Chrome中运行良好,但在Firefox中,一些转换(实际上很多)与Chrome不同.看看this小提琴(这是我的整个代码),并在两个浏览器中进行比较,以便更好地理解.

因为第一个小提琴包含很多代码,我会简化它并选择一个随机奇怪的过渡.看this小提琴,然后按“向左”按钮或向左箭头一次.它工作正常,但当你再次按下它时,矩形旋转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: relative;
margin: 25px auto 25px auto;
perspective: 600px;
}

#Box {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}

#Box figure {
    display: block;
    position: absolute;
    border: 1px solid black;
    line-height: 98px;
    font-size: 45px;
    text-align: center;
    font-weight: bold;
    color: white;
}

figure {
    margin: 0;
}

#Box .front,#Box .back {
    width: 148px;
    height: 98px;
}

#Box .right,#Box .left {
    width: 48px;
    height: 98px;
    left: 50px;
}

#Box .top,#Box .bottom {
    width: 148px;
    height: 48px;
    top: 25px;
    line-height: 48px;
}

#Box .front {
    background: hsla(000,100%,50%,0.7);
}

#Box .back {
    background: hsla(160,0.7);
}

#Box .right {
    background: hsla(120,0.7);
}

#Box .left {
    background: hsla(180,0.7);
}

#Box .top {
    background: hsla(240,0.7);
}

#Box .bottom {
    background: hsla(300,0.7);
}

#Box .front {
    transform: translateZ(25px);
}

#Box .back {
    transform: rotateX(180deg) translateZ(25px);
}

#Box .right {
    transform: rotateY(90deg) translateZ(75px);
}

#Box .left {
    transform: rotateY(-90deg) translateZ(75px);
}

#Box .top {
    transform: rotateX(90deg) translateZ(50px);
}

#Box .bottom {
    transform: rotateX(-90deg) translateZ(50px);
}

#Box.show-front {
    transform: translateZ(-50px);
}

#Box.show-right {
    transform: translateZ(-150px) rotateY(-90deg);
}

#Box.show-back-3 {
    transform: translateZ(-50px) rotateX(180deg) rotateZ(-180deg);
}

#Box.show-left {
    transform: translateZ(-150px) rotateY(90deg);
}

Box" class="show-front">