變換旋轉懸停向上移動一個像素

Question

我已經創建了一個圓形，其中包含一個fontAwesome圖標，並且在懸停時將其旋轉180度，工作正常，但在懸停時，當我將鼠標懸停並且圖標移動到180時，它的移動增加一個像素，不知道爲什麼。

我的問題是爲什麼它在懸停時向上移動一個像素，我無法找到問題。

這裏是JSFiddle演示

編輯請注意，它在Firefox中唯一發生的事情。

.share-icon { 
 
background-color: #f00; 
 
border-radius: 50%; 
 
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3); 
 
color: #ffffff; 
 
float: left; 
 
font-size: 18px; 
 
height: 45px; 
 
line-height: 45px; 
 
margin-top: 50px; 
 
position: relative; 
 
text-align: center; 
 
width: 45px; 
 
transition: all 0.5s ease 0s; 
 
cursor: pointer; 
 
} 
 
.share-icon:hover { 
 
-webkit-transform: rotate(180deg); 
 
-moz-transform: rotate(180deg); 
 
-ms-transform: rotate(180deg); 
 
-o-transform: rotate(180deg); 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> 
 
<div class="share-icon" onclick="shairIcon(this)"> 
 
    <i class="fa fa-share-alt" aria-hidden="true"></i> 
 
</div>

Answer 1

參考這個CSS，我做了修正。

您應該在懸停時添加fa圖標類並添加轉換屬性。

.share-icon:hover .fa-share-alt { 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    -moz-transition: all 500ms ease; 
} 

工作DEMO!!!

Answer 2

老實說，我不知道到底爲什麼，但如果你增加font-size只是兩個像素，你會擺脫這個跳躍。只需將代碼更新到以下

.share-icon { 
 
    background-color: #f00; 
 
    border-radius: 50%; 
 
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3); 
 
    color: #ffffff; 
 
    height: 45px; 
 
    width: 45px; 
 
    line-height: 45px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    font-size: 20px; 
 
} 
 
.share-icon i { 
 
    transition: all 0.5s ease 0s; 
 
} 
 
.share-icon:hover i { 
 
    transform: rotate(180deg); 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> 
 
<div class="share-icon" onclick="shairIcon(this)"> 
 
    <i class="fa fa-share-alt" aria-hidden="true"></i> 
 
</div>