CSS3旋轉時懸停字體真棒圖標？

什麼是正確的CSS來懸停字體真棒圖標時，css3旋轉。CSS3旋轉時懸停字體真棒圖標？

我有這樣的代碼來顯示一個Fontawesome圖標

<span class="fa-stack fa-5x"> 
    <i class="fa fa-circle fa-stack-2x">::before</i> 
    <i class="fa fa-flag fa-stack-1x fa-inverse">::before</i> 
</span>

然後我有這樣的CSS動畫圖標

.fa-stack:hover{ 
color: red; 
transition: 0.9s; 
transform: rotateY(180deg); 
}

的問題是，動畫是不是在smothly運動完成，即使指針位於圖標內，它也會返回到正常狀態。在我看來，問題是內部的<i>元素.fa-stack

我不知道如何在小提琴中顯示此內容。

可以在JS斌查看：http://jsbin.com/wohubuwaliho/1/

來源

2014-09-11 JPashs

http://jsbin.com/wohubuwaliho/2/edit – twodayslate 2014-09-11 12:26:23

發生此行爲是因爲你懸停是動畫的元素。旋轉發生時，鼠標懸停的元素會改變其大小。結果：在短時間內光標不再處於懸停位置。（自己看，爲圖標設置一個彩色邊框並將其懸停）。如果鼠標不能保持完全不動的話，這將跟隨事件的重置...

要避免這種情況，請將圖標設置在容器中，並在容器懸停時執行動畫。

HTML/CSS

.wrapper:hover .fa-stack{ 
 
    color: red; 
 
    transition: 0.9s; 
 
    transform: rotateY(180deg); 
 
} 
 
.wrapper{ 
 
    display: inline-block; 
 
    width: 200px; 
 
    border: 1px solid red; 
 
    overflow: hidden; 
 
    text-align: center; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="wrapper"> 
 
<span class="fa-stack fa-5x"> 
 
    <i class="fa fa-circle fa-stack-2x"></i> 
 
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i> 
 
</span></div>

來源

2014-09-11 12:30:40 ylerjen

在的jsfiddle工作正常，但不是在我的網站，看這個：HTTP ：//vid1286.photobucket.com/albums/a605/wmazzola/2014-09-11_14-43-43_zps5f702f2d.mp4 – JPashs 2014-09-11 12:47:29

我的錯誤，你的代碼工作正常。謝謝！ – JPashs 2014-09-11 12:49:03

如何平穩地回到正常狀態並反向旋轉？ – 2016-10-12 15:43:28

CSS3旋轉時懸停字體真棒圖標？

回答

相關問題