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

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!!!