L’animation Flip ne fonctionne pas sur Firefox

J’ai suivi ce tutoriel pour incorporer un retournement de carte sur mon site web. J’ai appris la leçon importante qui consiste à ne pas laisser votre site Web devenir opérationnel sans tester sur tous les principaux navigateurs, car l’animation ne fonctionne pas correctement sous Firefox. Je sais que je suis censé append des préfixes de fournisseur et je pense les avoir tous mais peut-être pas.

note : Quelques conseils généraux sur la façon de procéder au débogage dans Firefox seraient également grandement appréciés. J’utilise généralement Chrome et je ne suis pas très bon avec ça.

css

/* entire container, keeps perspective */ .flip-container { -moz-perspective: 1000; perspective: 1000; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .flip-container, .front, .back { width: 320px; height: 480px; margin: 10px 0 10px 0; } /* flip speed goes here */ .flipper { -moz-transition: 0.6s; transition: 0.6s; -moz-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { -moz-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0; -webkit-box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.6), 0px 0px 0px 14px #fff, 0px 0px 0px 18px rgba(0,0,0,0.2), 6px 6px 8px 17px #555; -moz-box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.6), 0px 0px 0px 14px #fff, 0px 0px 0px 18px rgba(0,0,0,0.2), 6px 6px 8px 17px #555; box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.6), 0px 0px 0px 14px #fff, 0px 0px 0px 18px rgba(0,0,0,0.2), 6px 6px 8px 17px #555; } /* front pane, placed above back */ .front { z-index: 2; } /* back, initially hidden pane */ .back { -moz-transform: rotateY(180deg); transform: rotateY(180deg); background-color: #99CCFF; } .flip-container { -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; perspective: 1000; margin: 20px 26px 32px 26px; } .flip-container, .front, .back { width: 240px; height: 240px; } .flipper { -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; position: relative; } .front, .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -moz-transition: 0.6s; -moz-transform-style: preserve-3d; -o-transition: 0.6s; -o-transform-style: preserve-3d; -ms-transition: 0.6s; -ms-transform-style: preserve-3d; transition: 0.6s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } .back { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } .flip-container:hover .back, .flip-container.hover .back { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .flip-container:hover .front, .flip-container.hover .front { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .front { z-index: 2; } 

html

  
The Officiant
Blah blah

En supposant que vous essayez de faire juste un retournement:
Vous avez essayé de réaliser trop de rotations à la fois par rapport à l’exemple de David Walsh.
J’ai commenté la dernière transform: rotate règles et donc cela fonctionne dans Firefox.

Modifier jsfiddle mis à jour avec nettoyage Voir mon jsfiddle: http://jsfiddle.net/Volker_E/n27qM/4/
J’ai également ajouté quelques commentaires pour un meilleur code dans mon jsfiddle, comme se débarrasser de -moz-box-shadow (juste pour Fx <4.0) ou ne pas inclure les unités de valeur sur les valeurs qui sont ‘0’ , etc.

En ce qui concerne votre question sur les conseils généraux: les outils de développement propres à Firefox sont un bon début, mais le meilleur outil à mon avis est Firebug. Pour une comparaison des deux, voir Quelles sont les fonctionnalités uniques de Firebug qui ne sont pas intégrées à Firefox?
Ou mettez votre code non seulement dans votre question, mais aussi dans jsfiddle, pour que d’autres puissent commencer à bricoler immédiatement! 😉