Fixed CSS3 animation bug in firefox

Question

I created a flip animation with css3. In webkit browsers, the flip looks great, but in firefox the flip animation does not work correctly. You can see that the flip animation works, but it looks really “weird” and doesn't flip over completely.

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

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

I made a violin to show an error

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

Thank you in advance

UPDATE: I ran the test on 4 different computers (Windows and Mac OS) that have the latest version of firefox installed, and it is the same on all computers.

Answer 1

Since you declare rotateY(-180deg) , the browser has a choice of which direction it chooses when flipping the map (rotation can go left or right).

Chrome "accidentally" takes the right direction for both parties, firefox reverses the way back for the other side. Taking rotateY(-179deg) (or rotateY(181deg) ) will force Firefox to use the same direction.

Fixed example

However, even the best way would be to simply leave the faces as they are, and instead revive the parent! Also, for this you don't need javascript (which introduces much less code: a pure css example )!

This article about 3D transformations helped me a lot when I started to penetrate 3d transformation material. It is definitely worth a read.

Answer 2

Is this when you knock over the bottom edge?

If so, it fires the mouseenter event, and then the mouseleave event right after it never fully animates.

Add logs to your javascript for your code in question

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

You may need to add something so as not to trigger the mouseleave event until the animation finishes.

something like this see fiddle 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); } ); 

If you roll over quickly and quickly, it can get confusing.

The best way to prevent something like this is to make it work on a click, not a hang.

Hope this helps