CSS懸停翻轉器不工作

Question

創建一個基於div的翻轉器。正面和背面目前編碼爲顏色，但背面最終將成爲背景圖像。

我按照這個指南在這裏：http://davidwalsh.name/css-flip哪些不起作用，但在演示中。我猜想做錯了事。

繼承人的

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