如何在css中進行硬幣翻轉轉換

所以，我有一個圖標，一個圓形圖標，我想在它懸停時做出這個圖標，它會有硬幣翻轉轉換，就像https://desandro.github.io/3dtransforms/examples/card-02-slide-flip.html，但它翻轉兩次，所以它回來了到第一個位置。如何在css中進行硬幣翻轉轉換

這是HTML代碼：

<div class="bg"> 
    <div class="icon"> 
     <img src="football.png"> 
    </div> 
</div>

這是CSS代碼：

.bg { 
     padding: 6px 6px; 
     float: left; 
     width: 20%; 
    } 

    .icon { 
     width: 100px; 
     height: 100px; 
     overflow: hidden; 
     border-radius: 50%; 
     box-shadow: 3px 3px 10px black; 
     border: 0px; 
     background-color: white; 
     margin-left: auto; 
     margin-right: auto; 
     display: block; 
    } 

    .icon img{ 
     left: 50%; 
     top: 50%; 
     height: 100%; 
     width: auto; 
    } 

    .icon:hover { 
     transform: translateX(-1px) rotateY(180deg); 
    }

所以變換不軟像從示例鏈接，以及當我第一次翻轉（或旋轉）時t用不同的圖像改變圖標，但是當第二次旋轉時它將回到第一圖像。任何建議？先謝謝

來源

2017-02-14 Rian

爲什麼我的圖像不顯示？ – Rian

假設只有兩個（即顯示兩個硬幣），圖像對我來說顯得很好。 –

是啊，它只是兩個，謝謝在我的瀏覽器它沒有出現@RionWilliams – Rian

你忘了添加動畫本身，轉換。

.bg { 
 
     padding: 6px 6px; 
 
     float: left; 
 
     width: 20%; 
 
    } 
 

 
    .icon { 
 
     width: 100px; 
 
     height: 100px; 
 
     overflow: hidden; 
 
     border-radius: 50%; 
 
     box-shadow: 3px 3px 10px black; 
 
     border: 0px; 
 
     background-color: white; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     display: block; 
 
     /* TRANSITION HERE!! */ 
 
     -webkit-transition: transform 1s ease; 
 
     -moz-transition: transform 1s ease; 
 
     -ms-transition: transform 1s ease; 
 
     -o-transition: transform 1s ease; 
 
     transition: transform 1s ease; 
 
     /* END OF TRANSITION */ 
 
    } 
 

 
    .icon img{ 
 
     left: 50%; 
 
     top: 50%; 
 
     height: 100%; 
 
     width: auto; 
 
    } 
 

 
    .icon:hover { 
 
     transform: translateX(-1px) rotateY(180deg); /* ALSO EXTRA TRANSFORM PROPERTIES ADDED FOR COMPATIBILITY*/ 
 
     -ms-transform: translateX(-1px) rotateY(180deg); /* IE 9 */ 
 
     -webkit-transform: translateX(-1px) rotateY(180deg); /* Chrome, Safari, Opera */ 
 
    }

<div class="bg"> 
 
    <div class="icon"> 
 
     <img src="https://i.stack.imgur.com/RVjde.jpg"> 
 
    </div> 
 
</div>

我希望這有助於。

乾杯！

來源

2017-02-14 14:37:26 Evochrome

omg，我忘了。非常感謝，你幫助我:) – Rian

可以定義動畫中的以下內容：

@keyframes flip_animation { 
    from {transform: rotateY(0deg);} 
    to {transform: rotateY(360deg);} 
}

並添加此動畫您在CSS-類

.icon:hover { 
    animation-name: flip_animation; 
    animation-duration: 1s; 
}

請參閱本link有關CSS動畫的更多信息。

來源

2017-02-14 14:47:59 Michael

它確實有效，但是這隻會促使翻轉前進而不翻轉翻轉，這在這種情況下是瞬時的。請參閱：https://jsfiddle.net/g3phq25y/1/ – Evochrome

我將在2h編輯 – Michael

感謝您的幫助，我想我也有一些選擇。 – Rian

如何在css中進行硬幣翻轉轉換

回答

相關問題