Problems with CSS Flip animation in Firefox

Question

I try to use the CSS flip animation example of David Walsh on my website. Code in my snippet doesn't work well with the Firefox.

How to fix this code without using of javascript magic? Why it happens with the latest Firefox versions?

#flip_blocks_main {
	position:relative;
	width: 100%;
	text-align: center;
}

.flip-container {
	margin-left:15px;
	margin-right:20px;
	margin-bottom:30px;
	display: inline-block; 		
	
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
	
	-ms-transform: perspective(1000px);
	-moz-transform: perspective(1000px);
	-o-transform: perspective(1000px);
	-webkit-transform: perspective(1000px);
	transform: perspective(1000px);
	
	-moz-transform-style: preserve-3d; 
	-webkit-transform-style: preserve-3d; 
	-ms-transform-style: preserve-3d; 
	transform-style: preserve-3d; 
}

/* START: Accommodating for IE */
.flip-container:hover .back, .flip-container.hover .back {
	-webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}
/* END: Accommodating for IE */

.flip-container, .front, .back {
	width: 300px;
	height: 230px;
}


.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-ms-transition: 0.6s;
	-moz-transition: 0.6s;
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transition: 1s;
	transform-style: preserve-3d;
	position: relative;
}

.front, .back {
	border: 4px solid black;
	border-radius: 10px;
	padding: 10px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(180deg);
    -moz-transition: 1s;
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateX(180deg);
    -o-transition: 1s;
    -o-transform-style: preserve-3d;
    -o-transform: rotateX(180deg);
    -ms-transition: 1s;
    -ms-transform-style: preserve-3d;
    -ms-transform: rotateX(180deg);
    transition: 1s;
    transform-style: preserve-3d;
    transform: rotateX(180deg);
	position: absolute;
	top: 0;
	left: 0;
}

.front {
	-webkit-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	background-color: #00E743;
	z-index: 2;
}

.back {
	background: #00e743;
	-webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}

.back > a {
	color:#ffffff;
	text-decoration:underline !important;
    font-size: 14px;
    padding: 5px;
    display: block;
    width: auto;
    height: auto;
    margin-top: 160px;
    text-decoration: none;
}

.back > a:hover {
	color:#000000;
	background-color:#00e743;
	text-decoration:none;
}

<div id="flip_blocks_main">
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" id="front_optic_front"><h1>First: Optic front</h1></div>
<div class="back" id="front_optic_back"><a href="#">First: Optic back</a></div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" id="sticker_front"><h1>Second: Stickers front</h1></div>
<div class="back" id="sticker_back"><a href="#">Second: Stickers back</a></div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" id="audio_front"><h1>Third: Audio front</h1></div>
<div class="back" id="audio_back"><a href="#">Third: Audio back</a></div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" id="alcantara_front"><h1>4th: Alcantara front</h1></div>
<div class="back" id="alcantara_back"><a href="#">4th: Alcantara back</a></div>
</div>
</div>
</div>

Answer 1

In your styles for .front you're missing the un-prefixed transform property:

.front {
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    background-color: #00E743;
    z-index: 2;
}

If you add it, it appears to work:

.front {
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    background-color: #00E743;
    z-index: 2;
}