CSS3 Multiple transform instructions working only on Chrome - html

Question

I'm trying to animate a flipping div so that it resizes correctly to show a second div as backface.
Everything works fine on Chrome, while on Firefox and IE the behavior is quite weird.
<style>
.flip-container {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
position: absolute;
top: 0px;
right: 0px;
}
#back.flip {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#front.flip {
-webkit-transform: rotateY(540deg) scale(2.5,2) translate(90px,62px);
-moz-transform: rotateY(540deg) scale(2.5,2) translate(90px,62px);
-o-transform: rotateY(540deg) scale(2.5,2) translate(90px,62px);
transform: rotateY(540deg) scale(2.5,2) translate(90px,62px);
}
#front {
width: 300px;
height: 250px;
}
.flip-container, #back {
width: 750px;
height: 500px;
}
.flipper {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
#front, #back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
-ms-transition: 0.6s;
transition: 0.6s;
position: absolute;
top: 0;
right: 0;
}
#front {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
background: lightgreen;
z-index: 2;
}
#back {
background: lightblue;
-webkit-transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
-moz-transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
-o-transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
-ms-transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
}
</style>
<div class="flip-container">
<div class="flipper">
<div id="front">
Text1
</div>
<div id="back">
Text2
</div>
</div>
</div>
<script>
var front = document.getElementById('front');
var back = document.getElementById('back');
front.onclick = function () {
front.className = 'flip';
back.className = 'flip';
}
</script>
Here a fiddle:
https://jsfiddle.net/h6oa0st2/
As you can see it flips only 180 degrees on Firefox instead of the expected 540, while on IE the animation is completely wrong.
I've found out that removing resizing and translating instructions leads to correct flipping, but the effect is of course different from the desired one.
Any hint on how to solve this?
Thanks in advance.