翻转动画无法在Firefox上运行

我按照本教程在我的网站上加入了卡片翻转。 我学到了重要的一课，即不在所有主流浏览器上进行测试就不让你的网站上线，因为动画在Firefox上无法正常运行 – 它只是来回翻转。 我知道我应该添加供应商前缀，我想我得到了所有这些，但可能没有。

注意 ：关于如何在Firefox中进行调试的一些一般性建议也将非常感激。 我通常使用Chrome，而我对此并不满意。

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
 
 
 
 
 
 
  

Answer 1

假设你正试图翻转：
与David Walsh的例子相比，你试图一次完成太多的轮换。
我已经注释掉了后者的transform: rotate规则，因此它适用于Firefox。

编辑更新jsfiddle与清理请参阅我的jsfiddle： http ： //jsfiddle.net/Volker_E/n27qM/4/
我还在jsfiddle中为更好的代码添加了一些注释，比如摆脱-moz-box-shadow （仅适用于Fx <4.0）或者不包含值为’0’的值单位等等。

关于你的一般建议问题：Firefox自己的开发者工具是一个良好的开端，但我认为最好的工具是Firebug。 有关这两者的比较，请参阅Firebug有哪些独特的function，而这些function并非内置于Firefox？
或者不仅将您的代码放入您的问题中，还将其放在jsfiddle上，以便其他人可以立即开始摆弄！ ;）