Question

当悬停字体真棒图标时，进行css3旋转的正确css是什么。

我有这个代码来显示一个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);
}

问题是动画不是以平滑的动作完成的，即使指针位于图标内，它也会返回正常状态。在我看来，问题是<i>

中的.fa-stack元素

我不知道如何在小提琴中展示这一点。

您可以在 JS Bin ：http://jsbin.com/wohubuwaliho/1/

中查看

Answer 1

发生此行为是因为您将鼠标悬停在动画元素上。当旋转发生时，鼠标悬停的元素会改变它的大小。结果：短时间内光标不再处于悬停位置。（单独看，为图标设置彩色边框并将其悬停）。如果鼠标不能保持完全不动，则会重置事件...

要避免这种情况，请在容器中设置图标，并在容器悬停时执行动画。

<强> HTML / CSS

＆＃13;

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

＆＃13;

<link href="https://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>

＆＃13;

当悬停字体真棒图标时CSS3旋转？

1 个答案: