CSS가 다른 브라우저에서 카드를 뒤집기

Question

안녕하세요 저는 다른 브라우저에서 카드 뒤집기 효과를 만들 필요가 있지만 크롬과 오페라에서만 올바르게 작동합니다 ... 다른 브라우저에서는 이미지가 변경되거나 이미지가 바뀌지 만 뒤집기는하지 않습니다. 너 .. 날 도와 줄 수있어 ?? 이 내 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); 
}