jquery - 翻转效果在 mozilla 中不起作用

Question

翻转效果在 chrome 中完美运行，但在 Mozilla 中不起作用 请检查这个 fiddle http://jsfiddle.net/asomani/kr4s4k7f/4/

<div class="stage">
    <div class="flashcard">
        <div class="front">
            <p>1</p>
        </div>
        <div class="back">
            <p>2</p>
        </div>
    </div>  
</div>

Answer 1

您忽略了添加 firefox 使用的一般属性(没有 -webkit-)，侧面的背景也有帮助:

.flashcard {
  height: 300px;  
  width: 500px; 
  margin: 10% auto;
  border: 1px solid gray; 
  box-shadow: 2px 2px 2px #000;
  transform-style: preserve-3d; /** add **/
  -webkit-transform-style: preserve-3d;  
  transition: all 0.3s;               
  -webkit-transition: all 0.3s;
}

.front, .back {
  height: 300px;          
  width: 500px;
  position: absolute;    
  text-align: center;
  backface-visibility: hidden; /** add **/
  -webkit-backface-visibility: hidden;       
  background: white; /** add **/
}