翻轉兩個不同的圖像並停留在懸停上

這個想法是在CSS上創建一個無限動畫，它將顯示卡片的兩側始終旋轉，並停止懸停時的動畫，只顯示前面並增加尺寸20 ％鏈接到另一部分。翻轉兩個不同的圖像並停留在懸停上

我可以翻轉並生長到懸停的第二個圖像，但我似乎無法替換關鍵幀動畫上的動作。

這是我到目前爲止有：

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.panel { 
    width: 300px; 
    height: 300px; 
    margin: auto; 
    position: relative; 
} 
.card { 
    width: 100%; 
    height: 100%; 
    -o-transition: all .5s; 
    -ms-transition: all .5s; 
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    transition: all .5s; 
    -webkit-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    -webkit-animation: CardFlip 5s infinite; 
} 
.front { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 2; 
    background-image: url('http://placehold.it/300x300/red'); 

} 
.back { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
    -webkit-transform: rotateY(-180deg); 
    -ms-transform: rotateY(-180deg); 
    -moz-transform: rotateY(-180deg); 
    transform: rotateY(-180deg); 
    background-image: url('http://placehold.it/300x300/blue'); 

} 
.panel:hover .front { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
    -webkit-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 
.panel:hover .back { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 2; 
    -webkit-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    -moz-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
    -webkit-transform: scale(1.2,1.2); 
    -ms-transform: scale(1.2,1.2); 
    -moz-transform: scale(1.2,1.2); 
    transform: scale(1.2,1.2); 
} 

@-webkit-keyframes CardFlip { 
    0% { 
position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 2; 
    -webkit-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    -moz-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
    -webkit-transform: scale(1.2,1.2); 
    -ms-transform: scale(1.2,1.2); 
    -moz-transform: scale(1.2,1.2); 
    transform: scale(1.2,1.2); 
    } 
    100% { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
    -webkit-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    } 
} 
</style> 
</head> 
<body> 
<br>   
<br>  
<div class="panel"> 
    <div class="front card"> 
    </div> 
    <div class="back card"> 
    </div> 
</div> 
</body>

來源

2014-07-09 JFD

'z-index'屬性將不會應用於選擇器，除非您還包括'position'屬性。 – TylerH

（謝謝回答）通過設置位置屬性爲： position：absolute; top：0px; left：0px; 我需要修改它嗎？ – JFD

我的意思是，你有幾個包含'z-index'值聲明的選擇器。這些選擇器還需要** all **包含'position'聲明，無論它是'relative'，'absolute'還是'fixed'，以便使'z-index'工作。 – TylerH

我認爲你需要添加backface-visibility: hidden;只在前卡片。

如果你需要你的動畫具有無限的外觀，你必須有類似的0％和100％點。

另外，您錯過了transform-style: preserve-3d;屬性。

另外，我添加了一個容器以避免卡片上的動畫。我認爲它更具語義。

看看這個小提琴：http://jsfiddle.net/nikoloza/2zrk7/

更新

如果再加perspective: 1000到主容器中，我們將得到真正的3D效果。小提琴：http://jsfiddle.net/nikoloza/2zrk7/1/

更新2

如果我們只需要左到右翻轉，我們可以設置360deg，而不是0deg到動畫中的100％點。小提琴：http://jsfiddle.net/nikoloza/2zrk7/2/

來源

2014-07-16 01:29:51 nikoloza

非常感謝！我將與更新2一起去！現在，我將嘗試顯示和增加每個圖像在懸停上的大小，而不是僅顯示前面......我的意思是，如果我將鼠標懸停在前面以顯示前面，並且如果我將鼠標懸停在背面以顯示回... 謝謝你的全力幫助你真是太棒了！ – JFD

啊，好的。如果您遇到此問題，請告訴我。 – nikoloza

我還沒有能夠使這項工作在IExplorer或Firefox，任何想法？ – JFD

翻轉兩個不同的圖像並停留在懸停上

回答

相關問題