CSS 호버 플리퍼가 작동하지 않음

Question

div 기반 플리퍼 만들기. 전면과 후면은 현재 색상으로 코딩되어 있지만 뒷면은 결국 배경 이미지가됩니다.

나는이 가이드를 여기에 따라 왔습니다. http://davidwalsh.name/css-flip은 아직 작동하지 않습니다. 데모에서 작동합니다. 아마 뭔가 잘못한 것 같아.

을 heres

HTML :

<div class="flip-container"> 

    <div class="flipper"> 

     <div class="front"> 

      Front 

     </div> 

     <div class="back"> 

      Back 

     </div> 

    </div> 

</div> 

CSS :

.flip-container { 
    perspective:1000; 
} 

.flip-container:hover .flipper, .flip-container.hover .flipper { 
    transform: rotateY(180deg); 
} 

.flip-container, .front, .back { 
    height:480px;width:320px; 
} 

.flipper { 
    position:relative; 
} 

.front { 
    background:#99CCFF; 
    z-index:2; 
} 

.back { 
    background:#CCC; 
    transform:rotateY(180deg); 
} 

.front, .back { 
    backface-visibility:hidden; 
    position:absolute;top:0;left:0; 
} 

하고 사랑스러운 jsfiddle :

http://jsfiddle.net/Ssp7L/

Answer 1

어떤 형제 너는 사용 했니? Chrome v35를 사용하는 경우 변형 속성에 접두사를 추가해야합니다.

.flip-container { 
    -webkit-perspective:1000; 
} 

    .flip-container:hover .flipper, .flip-container.hover .flipper { 
     -webkit-transform: rotateY(180deg); 
    } 

.flip-container, .front, .back { 
    height:480px;width:320px; 
} 

.flipper { 
    position:relative; 
    transition: 0.6s; 
} 

.front { 
    background:#99CCFF; 
    z-index:2; 
} 

.back { 
    background:#CCC; 
    -webkit-transform:rotateY(180deg); 
} 

.front, .back { 
    -webkit-backface-visibility:hidden; 
    position:absolute;top:0;left:0; 
} 

Demo