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

老实说，我并不确切知道为什么，但如果你将table2增加两个像素，你就会摆脱这种跳跃。只需将您的代码更新为以下

即可

＆＃13;

font-size

＆＃13;

.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);
}

＆＃13;

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

2 个答案: