Firefox CSS rotation differs from Chrome rotation

Question

I want to make a 3D rectangle (parallelepiped) which the users can move with the arrows. It works fine in Chrome, but in Firefox some transitions (a lot actually) are different from Chrome. Look at this fiddle (this is my whole code) and compare it in both browsers to understand better.

Because the first fiddle contains a lot of code, I'll simplify it and pick one random strange transition. Look at this fiddle, and press the "Left" button or the left arrow one time. It works fine, but when you press it again, the rectangle rotates 3 times instead of 1 time.

Is this a Firefox bug or what am I doing wrong?

The code below is what you'll find in the simplified fiddle.

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, 100%, 50%, 0.7);
}

#box .right {
    background: hsla(120, 100%, 50%, 0.7);
}

#box .left {
    background: hsla(180, 100%, 50%, 0.7);
}

#box .top {
    background: hsla(240, 100%, 50%, 0.7);
}

#box .bottom {
    background: hsla(300, 100%, 50%, 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);
}

<section class="container">
    <div id="box" class="show-front">
        <figure class="front">1</figure>
        <figure class="back">2</figure>
        <figure class="right">3</figure>
        <figure class="left">4</figure>
        <figure class="top">5</figure>
        <figure class="bottom">6</figure>
    </div>
</section>

Answer 1

Based on the assumption that Firefox is just buggy in this regard (see analysis below), here is a workaround that works on Firefox. It wraps the #box element in another div, and only transitions the wrapper. And the wrapper is only ever rotated 90 degrees from the starting point in one direction at a time, so Firefox can't mess it up.

Once the transition finishes, the rotation is reset back to the starting position and simultaneously the inner box is rotated to the new position, both without transition, so the change is not visible.

The second important change is using the current computed transformation of #box and adding the rotation to that, so that we don't have to keep track of the rotations as we go.

Note that the order of rotations matters. To achieve what you're trying to do (rotating in "world space" rather than "object space"), you need to apply the rotations in reverse order. E.g. to rotate "right", use .css("transform", "rotateY(90deg) " + currentComputedTransform). This will resolve the issue you mentioned in comments where it appears to rotate around the wrong axis. See below for more information.

Note also that I don't allow a rotation to start if there's already one in progress, because that won't work. You could queue up keystrokes in an array if you want to be able to that, but you might also want to reduce the transition duration proportional to queue length in that case so it doesn't take forever.

Updated fiddle: https://jsfiddle.net/955k5fhh/7/

Relevant javascript:

$("#box").wrap("<div id='outer'></div>");
var pending=null;

function rotate(axis,angle,dir) {
    if (pending) return;
    $("#outer").removeClass().addClass(dir);
    var current=$("#box").css("transform");
    if (current=='none') current='';
    pending="rotate"+axis+"("+angle+"deg) "
      + current;
}

$("#outer").bind('transitionend', function() {
    $(this).removeClass();
    $("#box").css('transform',pending);
    pending=null;
});

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

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

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

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

---

Previous analysis

I've been playing with JS-based solutions and I came across this useful post https://gamedev.stackexchange.com/a/67317 - it points out that to rotate objects in "world space" instead of "object space", you just need to reverse the order of the rotations.

Based on that, I simplified your fiddle to the following:

var rot = "";
var tr = "translateZ(-50px)";

$('#up').bind('click', function() {
    rot=" rotateX(90deg)"+rot;
    $("#box").css("transform",tr+rot);
});

$('#down').bind('click', function() {
    rot=" rotateX(-90deg)"+rot;
    $("#box").css("transform",tr+rot);
});

$('#right').bind('click', function() {
    rot=" rotateY(90deg)"+rot;
    $("#box").css("transform",tr+rot);
});

$('#left').bind('click', function() {
    rot=" rotateY(-90deg)"+rot;
    $("#box").css("transform",tr+rot);
});

https://jsfiddle.net/955k5fhh/ (note that it's not a complete solution, because eventually the rot string will get too long)

And on Chrome, that behaves as expected. And once again, Firefox gets it wrong, even if you're just chaining e.g. a sequence of rotateX(90deg) transformations.

So I went one step further and rolled up adjacent rotations in the same axis...

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

https://jsfiddle.net/955k5fhh/2/

Which, again, works well in Chrome, and works a bit better in Firefox, but still once you switch axes, you can wind up spinning the wrong way. And similarly if you click a button before a transition completes, it can spin the wrong way.

So I would conclude that unfortunately yes, Firefox is just buggy in this, but at least there are workarounds.