फ़ायरफ़ॉक्स में CSS3 फ्लिप एनीमेशन बग

Question

मैंने css3 के साथ एक फ्लिप एनीमेशन बनाया है। वेबकिट ब्राउज़र पर फ्लिप ठीक दिखता है, लेकिन फ़ायरफ़ॉक्स में फ्लिप एनीमेशन ठीक से काम नहीं करता है। आप देख सकते हैं कि फ्लिप एनीमेशन काम करता है, लेकिन यह वास्तव में "अजीब" दिखता है और सभी तरह से फ्लिप नहीं करता है।

मेरे एचटीएमएल:

<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> 

मेरे सीएसएस:

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

मैं बग को दिखाने के लिए

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

अग्रिम धन्यवाद एक बेला बनाया

अद्यतन: मैंने फ़ायरफ़ॉक्स के नवीनतम संस्करण को चलाने वाले 4 अलग-अलग कंप्यूटर (विंडोज़ और मैक ओएस) पर एक परीक्षण किया, और यह सभी कंप्यूटरों पर समान है।

Answer 1

में मदद करता है के बाद से आप rotateY(-180deg) घोषित, ब्राउज़र विकल्प किस दिशा में यह चुनता है जब कार्ड flipping है (रोटेशन बाएं से या सही से जा सकते हैं)।

क्रोम "गलती से" दोनों चेहरों के लिए सही दिशा लेता है, फ़ायरफ़ॉक्स बैकफ़ेस के लिए विपरीत तरीका लेता है। rotateY(-179deg) (या rotateY(181deg)) लेना फ़ायरफ़ॉक्स को उसी दिशा का उपयोग करने के लिए मजबूर करेगा।

fixed Example

हालांकि, और भी बेहतर तरीके के रूप में वे कर रहे हैं सिर्फ चेहरे को छोड़ने के लिए और बदले में माता-पिता चेतन होगा! इसके अलावा आपको इसके लिए जावास्क्रिप्ट की आवश्यकता नहीं है (जो बहुत कम कोड पेश करता है: pure css example)!

This article about 3d transforms ने मुझे 3 डी ट्रांसफॉर्म सामग्री में शामिल होने पर बहुत मदद की। यह निश्चित रूप से पढ़ने लायक है।

Answer 2

क्या यह नीचे की ओर रोलओवर होता है?

तो यह mouseenter घटना चल रहा है, तो mouseleave घटना सीधे इतना के बाद यह पूरी तरह से एनिमेट होने कभी नहीं।

सवाल

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

तुम कुछ जब तक एनीमेशन पूरा हो गया है mouseleave घटना नहीं चलाने के लिए जोड़ना पड़ सकता है में अपने कोड के लिए अपने जावास्क्रिप्ट के लिए लॉग जोड़ें।

कुछ इस तरह बेला 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); 
    } 
); 

यदि आप रोल ओवर देख सकते हैं और बाहर एक जल्दी से यह भ्रमित हो सकते हैं।

इस तरह की किसी भी चीज़ को रोकने का सबसे अच्छा तरीका यह होवर के बजाए क्लिक पर काम करना होगा।

आशा इस