Błąd animacji klapki CSS3 w firefox

Question

Stworzyłem animację klapki z css3. W przeglądarkach webkit klapka wygląda dobrze, ale w firefoxie animacja klapki nie działa poprawnie. Możesz zobaczyć, że animacja klapki działa, ale wygląda naprawdę "dziwnie" i nie odwraca się całkowicie.

Moje html:

<li class="employee"> 
    <div class="employee_container"> 
     <div class="front flip"> 
      <img src="http://www.piratealumni.com/s/722/images/editor/headshots/AshleyPerson.jpg" alt=""> 
     </div> 
     <div class="back flip"> 
      <h2>Title</h2> 
      <h3>Lorem ipsum</h3> 
      <p>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</p> 
     </div> 
    </div> 
</li> 

Moje CSS:

.employee { 
    width:33%; 
    float:left; 
    display:block; 
    padding:0.5em; 
    height:20em; 
} 

.employee_container { 
    height:100%; 
    position:relative; 
    -webkit-perspective: 800px; 
    -moz-perspective: 800px; 
    -ms-perspective: 800px; 
    -o-perspective: 800px; 
    perspective: 800px; 
} 

.back, .front { 
    border: 3px solid #cecece; 
    position:absolute; 
} 

.front img { 
    min-height:100%; 
    height:auto; 
    width:100%; 
} 

.front { 
    overflow:hidden; 
    width:100%; 
    height:100%; 
    z-index:900; 
    -webkit-transform: rotateX(0deg) rotateY(0deg); 
    -webkit-transform-style: preserve-3d; 
    -webkit-backface-visibility: hidden; 

    -moz-transform: rotateX(0deg) rotateY(0deg); 
    -moz-transform-style: preserve-3d; 
    -moz-backface-visibility: hidden; 

    -o-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -webkit-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out; 
} 

.active .front { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
} 

.back { 
    background-image: url(img/RD.png); 
    background-repeat: no-repeat; 
    background-position:90% 93%; 
    padding:1em; 
    background-color:#ecad40; 
    height:100%; 
    width:100%; 
    z-index:800; 
    -webkit-transform: rotateY(-180deg); 
    -webkit-transform-style: preserve-3d; 
    -webkit-backface-visibility: hidden; 

    -moz-transform: rotateY(-180deg); 
    -moz-transform-style: preserve-3d; 
    -moz-backface-visibility: hidden; 

    -o-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -webkit-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out; 
} 

.active .back { 
    z-index: 1000; 
    -webkit-transform: rotateX(0deg) rotateY(0deg); 
    -moz-transform: rotateX(0deg) rotateY(0deg); 
} 

.back h3 { 
    font-weight:normal; 
    font-size:0.8em; 
} 

.back p { 
    font-size:1em; 
    padding-top:1em; 
    border-top:1px dashed white; 
    margin-top:1em; 
} 

Zrobiłem skrzypce pokazać bug

http://jsfiddle.net/vDQwQ/1/

góry dzięki

AKTUALIZACJA: Zrobiłem test na 4 różnych komputerach (Windows i Mac OS) z najnowszą wersją firefox i jest taki sam na wszystkich komputerach.

Answer 1

Od zadeklarować rotateY(-180deg) przeglądarka ma wyboru, który wybiera kierunek podczas odbijania karty (rotacja może iść z lewej lub z prawej strony).

Chrome "przypadkowo" przybiera właściwy kierunek dla obu twarzy, firefox przyjmuje odwrotną stronę dla tła. Wybranie rotateY(-179deg) (lub rotateY(181deg)) spowoduje, że Firefox użyje tego samego kierunku.

fixed Example

Jednak nawet lepszym sposobem byłoby po prostu zostawić twarze jak one są i zamiast ożywiać rodzica! Również nie potrzebujesz do tego javascript (który wprowadza znacznie mniej kodu: pure css example)!

This article about 3d transforms pomógł mi dużo, gdy zacząłem dostawać się do 3D transformacji rzeczy. Warto przeczytać.

Answer 2

Czy to jest po przewróceniu dolnej krawędzi?

Jeśli tak to działa zdarzenie mouseenter, to zdarzenie mouseLeave prosto po tak nigdy w pełni animuje.

Dodaj dzienniki do JavaScript do kodu w pytaniu

$('.employee_container').hover(
    function(){ 
    $(this).addClass('active'); 
    console.log('over'); 
    }, 
    function(){ 
    $(this).removeClass('active'); 
    console.log('off'); 
    } 
); 

może trzeba dodać coś jest nie uruchamiać zdarzenie mouseLeave aż animacja jest zakończona.

coś takiego zobaczyć skrzypce http://jsfiddle.net/vDQwQ/10/

var animating = false; 
var callback = function(){ 
    animating = false 
}; 

$('.employee_container').hover(
    function(){ 

    if(animating) return; 
    animating = true; 

    $(this).addClass('active'); 

    //set small delay 
    setTimeout(callback, 100); 

    }, 
    function(){ 

    if(animating) return; 
    animating = true; 

    $(this).removeClass('active'); 

    //set small delay 
    setTimeout(callback, 100); 
    } 
); 

jeśli najazdu i OUT A szybko może się mylić.

Najlepszym sposobem na uniknięcie tego typu sytuacji byłaby praca nad kliknięciem zamiast najechania.

Nadzieja to pomaga