Javascript Firefox CSS旋转与Chrome旋转不同

我想制作一个3D矩形（平行六面体），用户可以用箭头移动它。它在Chrome中运行良好，但在Firefox中，某些转换（实际上很多）与Chrome不同。查看fiddle（这是我的全部代码），并在两种浏览器中进行比较，以便更好地理解

因为第一个fiddle包含很多代码，所以我将简化它并选择一个随机的奇怪转换。看着小提琴，按下“左”键或左箭头一次。它工作正常，但当您再次按下它时，矩形将旋转3次而不是1次

这是Firefox的bug还是我做错了什么

下面的代码是您在简化的小提琴中可以找到的代码

var位置='show front'；
$（'#left'）.bind（'click'，function（）{
如果（位置==‘显示前方’）{
$（'#box'）.removeClass（）.addClass（'show-right'）；
位置='show right'；
}else if（位置==‘显示右侧’）{
$（'#box'）.removeClass（）.addClass（'show-back-3'）；
位置='show-back-3'；
}否则，如果（位置=='show-back-3'）{
$（'#box'）.removeClass（）.addClass（'show-left'）；
位置='show left'；
}else if（位置==‘显示左侧’）{
$（'#box'）.removeClass（）.addClass（'show-front'）；
位置='show front'；
}
});
$（窗口）.bind（'keyup'，函数（事件）{
开关（event.keyCode）{
案例37://左
$（“#左”）。单击（）；
打破
}
});
.container{
宽度：150px；
高度：100px；
位置：相对位置；
保证金：25px自动25px自动；
透视图：600px；
}
#盒子{
宽度：100%；
身高：100%；
位置：绝对位置；
变换样式：保留-3d；
转变：转变1s；
}
#箱形{
显示：块；
位置：绝对位置；
边框：1px纯黑；
线高：98px；
字体大小：45px；
文本对齐：居中；
字体大小：粗体；
颜色：白色；
}
身材{
保证金：0；
}
#盒子，前面，
#盒子，回来{
宽度：148px；
高度：98px；
}
#盒子,对，
#盒子，左边{
宽度：48px；
高度：98px；
左：50px；
}
#盒子，上面，
#盒子，底部{
宽度：148px；
高度：48px；
顶部：25px；
线高：48px；
}
#盒子，前面{
背景：hsla（000,100%，50%，0.7）；
}
#盒子，回来{
背景：hsla（160,100%，50%，0.7）；
}
#盒子，对{
背景：hsla（120,100%，50%，0.7）；
}
#盒子，左边{
背景：hsla（180,100%，50%，0.7）；
}
#盒子，上面{
背景：hsla（240100%，50%，0.7）；
}
#盒子，底部{
背景：hsla（300,100%，50%，0.7）；
}
#盒子，前面{
变换：translateZ（25px）；
}
#盒子，回来{
变换：rotateX（180度）translateZ（25像素）；
}
#盒子，对{
变换：旋转（90度）平移（75像素）；
}
#盒子，左边{
变换：旋转（-90度）平移Z（75像素）；
}
#盒子，上面{
变换：旋转（90度）平移（50像素）；
}
#盒子，底部{
变换：rotateX（-90度）translateZ（50像素）；
}
#包厢{
变换：translateZ（-50px）；
}
#右上角{
变换：translateZ（-150px）rotateY（-90度）；
}
#框。显示-back-3{
变换：translateZ（-50px）rotateX（180度）rotateZ（-180度）；
}
#框。向左显示{
变换：translateZ（-150px）rotateY（90度）；
}

1.
2.
3.
4.
5.
6.
看起来你做的一切都是对的，Chrome和Firefox的轮换差异是由两种浏览器处理CSS3的方式造成的。当查看从
show-back-4
到
show-top-4
的旋转时，CSS文件将旋转指定为
270deg
。在Firefox中，它就是这样做的。在Chrome中，它看起来像是进行了优化，没有进行完全的旋转，从而节省了处理能力。因此，是的，我认为这只是浏览器之间的差异，而不是其中任何一个浏览器中的错误。
您可以尝试使用关键帧来获得对动画的更多控制，例如：

@keyframes front-to-right {
    from {transform: translateZ(-50px) rotateY(0deg); }
    to {transform:  translateZ(-150px) rotateY(-90deg);}
}


我正在为小提琴中的所有过渡定义起点和终点，如下所示：

@keyframes front-to-right {
    from {transform: translateZ(-50px) rotateY(0deg); }
    to {transform:  translateZ(-150px) rotateY(-90deg);}
}

这在两种浏览器中看起来都一样，但在动画结束前单击按钮时会出现跳跃

您也可以考虑用JavaScript动画来获得精确的控制，避免定义每个转换，例如：
@keyframes front-to-right {
    from {transform: translateZ(-50px) rotateY(0deg); }
    to {transform:  translateZ(-150px) rotateY(-90deg);}
}


var applyrotion=function（）{
$（'#box'）.css（'transform'，'rotateY（'+rotateY+'deg'）；
handleMultipleRotations（）；
};
var解除超时；
var rotateY=0；
var handleMultipleRotations=函数（）{
$（'框'）.css（'过渡期'，''）；
如果（解除超时的类型=='number'）{
clearTimeout（unwindTimeout）；
unwindTimeout=未定义；
}
如果（数学绝对值（旋转方向）>=360）{
unwindTimeout=setTimeout（函数（）{
rotateY-=数学楼层（rotateY/360）*360；
$（'#box'）.css({
“转换持续时间”：“0s”，
“transform”：“rotateY（'+rotateY+'deg）”
});
}, 1000);
}
};
$（'document'）.ready（函数（）{
$（'#left'）。在（'click'，function（）上{
rotateY-=90；
Applyrotion（）；
});
$（'#right'）。在（'click'，function（）上{
rotateY+=90；
Applyrotion（）；
});
});
/*缩小以将焦点绘制到js*/.容器{宽度：150px；高度：100px；位置：相对；边距：25px自动；透视：600px}长方体{宽度：100%；高度：100%；位置：绝对；变换样式：保留-3d；过渡：变换1s}长方体图形（2）字体大小：45px；文本对齐：中心；字体重量：700；颜色：颜色：颜色：fff}图图州（州）州（州）边界；位置；位置；位置；位置；位置：绝对；绝对；绝对；位置；位置；绝对；边界：1px固体（1px）固体（1px）固体（1px）固体；000；绝对；绝对；边界：1px固体（1px固体）000；000；000；000；边界：1px固体；000；000；000；000；000；000；000；000；000；000；000；000；边界：边界：1px固体；000；000；000；000；000；边界：1px固体；000；000；000；000；000；000；000；000；000；000；000；000；000；000；000；000；000；000；行高度；边界：1px固体固体；000；000；000；000；000；000；000；000；000；000；000；#盒子前面{背景：hsla（000100%，50%，.7）}方框。背面{背景：hsla（160100%，50%，.7）}方框。右侧{背景：hsla（120100%，50%，.7）}方框。左侧{背景：hsla（180100%，50%，.7）}方框。顶部{背景：hsla（240100%，50%，.7）}方框。底部{背景：hs}
var rots = [];
var tr = "translateZ(-50px)";

function transform() {
    var tf = "translateZ(-50px)";
    rots.forEach(function(rot) {
        tf += " rotate" + rot[0] + "(" + rot[1] + "deg)";
    });
    console.log(tf);
    $("#box").css("transform", tf);
}

function addRot(axis,angle) {
    if (rots.length==0 || rots[0][0]!=axis) {
        rots.unshift([axis,angle]);
    } else {
        rots[0][1]+=angle;
    }
    transform();
}

$('#up').bind('click', function() {
    addRot('X',90);
});

$('#down').bind('click', function() {
    addRot('X',-90);
});

$('#right').bind('click', function() {
    addRot('Y',90);
});

$('#left').bind('click', function() {
    addRot('Y',-90);
});