css在不同的瀏覽器中翻動卡片

Question

嗨，我需要在不同的瀏覽器中製作翻動卡片效果，但它只能在Chrome和Opera中正常工作......在不同的瀏覽器中，它不會更改圖像或更改圖像，但不會翻轉。 .. 你可以幫我嗎？？這是我的CSS代碼：

.flip-container { 
    perspective: 1000; 
} 
/* flip the pane when hovered */ 
.flip-container:hover .flipper, .flip-container.hover .flipper { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 

.flip-container, .front, .back { 
    width: 400px; 
    height: 200px; 
} 

/* flip speed goes here */ 
.flipper { 
    transition: 0.4s; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 

    position: relative; 
} 

/* hide back of pane during swap */ 
.front, .back { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 

    position: absolute; 
    top: 0; 
    left: 0; 
} 

/* front pane, placed above back */ 
.front { 
    z-index: 2; 
} 

/* back, initially hidden pane */ 
.back { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 

textarea { 
    resize: none; 
} 

，這是我的html代碼：

<div id="sekcia"> 
       <a href="http://<?echo $_SERVER['SERVER_NAME'];?>/sk/hudba">    <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
        <div class="flipper"> 
         <div class="front"> 
          <img src="http://<?echo $_SERVER['SERVER_NAME'];?>/images/titulna/hudba.png"><!-- front content --> 
         </div> 
         <div class="back"> 
          <img src="http://<?echo $_SERVER['SERVER_NAME'];?>/images/titulna/hudba1.png"><!-- back content --> 
         </div> 
        </div> 
       </div></a> 
      </div> 

Answer 1

有一件事我比你的代碼不同的是：

.front { 
z-index: 2; 
/* for firefox 31 */ 
transform: rotateY(0deg); 
}