Question

翻转效果在chrome中完美运行，但它在Mozilla中不起作用请查看这个小提琴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 **/
}

Answer 2

试试这个CSS。 JSFIDDLE

    .stage {
  -webkit-perspective: 1000; 
  -moz-perspective: 1000; 
}

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

.flipped, .back {
  transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);  
 -webkit-transform: rotateX(180deg); 
}

.front, .back {
  height: 300px;          
  width: 500px;
  position: absolute;    
  text-align: center;   
  -webkit-backface-visibility: hidden;       
  -moz-backface-visibility: hidden;       
}

.front p, .back p {
  margin-top: 25%;       
  font-size: 3em;
}

翻转效果在mozilla中不起作用

2 个答案: