Проблемы с анимацией флип CSS в Firefox

Question

Я пытаюсь использовать пример флип-анимации CSS Дэвида Уолша на моем сайте. Код в моем фрагменте не работает с Firefox.

Как исправить этот код без использования javascript magic? Почему это происходит с последними версиями Firefox?

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

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

 
/* START: Accommodating for IE */ 
 
.flip-container:hover .back, .flip-container.hover .back { 
 
\t -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 { 
 
\t width: 300px; 
 
\t height: 230px; 
 
} 
 

 

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

 
.front, .back { 
 
\t border: 4px solid black; 
 
\t border-radius: 10px; 
 
\t padding: 10px; 
 
\t -webkit-backface-visibility: hidden; 
 
\t -moz-backface-visibility: hidden; 
 
\t -ms-backface-visibility: hidden; 
 
\t 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); 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
} 
 

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

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

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

 
.back > a:hover { 
 
\t color:#000000; 
 
\t background-color:#00e743; 
 
\t 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

В ваших стилей для .front вы отсутствующей неразделанный приставкой преобразования свойства:

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

Если добавить, что, кажется, работает:

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