变换旋转悬停向上移动一个像素

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>