CSS过渡在悬停时闪烁

Question

很高兴你能抽出时间阅读我的问题！我想在鼠标悬停时翻转一个div。一切都很好，但是在过渡期间它会闪烁。它几乎看起来像是翻转了多次！这破坏了整个翻转效果。以下是我的代码和一个fiddle链接：

fiddle链接：FIDDLE CSS样式：

.rotate {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    padding:20px;
    background-color: #333;
    width: 200px;
    text-align: center;
    margin: 0 auto;
    font-family: sans-serif;
    color: #FFFFFF;
    border-top: #E9F01D 3px solid;
}
.rotate:hover {
    letter-spacing: 5px;
    color: #E9F01D;
    cursor: pointer;
    -ms-transform: rotatex(360deg);
    -webkit-transform: rotatex(360deg);
    transform: rotatex(360deg);
}

这种闪烁效果能否避免？如果可以，我该怎么做呢？

提前感谢！

- Wijnand M

---

尝试添加此代码 > -webkit-backface-visibility:hidden; - webkit

当你悬停并缩小div时，鼠标指针会离开div（因为它在缩小），导致它再次增长，直到鼠标指针再次触摸它。一个可能的解决方案是将:hover放在父元素上。 - fboes

@fboes 这样做不会对父元素产生完全相同的影响吗？我还是要试一下，只是想知道一下... - Wijnand M

我尝试在http://jsfiddle.net/h463d8p6/2/上运行它 - 这对你来说更好吗？ - fboes

Answer 1

如评论中所述：

主要问题是：当悬停在移动（或动画）的 div 上时，您可能会因为它在光标下方移动而取消对该元素的悬停。

解决方案：将悬停选择器放置在一个容器元素上，该容器元素在您悬停时不改变其大小：

例子在这里。

.rotate {
  width: 200px; height:80px;
  background:green;
}

.rotate .rotate-inner {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  
  -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
          transition: all 0.3s;
  
  padding:20px;
  background-color: #333;
  text-align: center;
  margin: 0 auto;
  font-family: sans-serif;
  color: white;
  border-top: #E9F01D 3px solid;
}

.rotate:hover .rotate-inner {
  letter-spacing: 5px;
  color: #E9F01D;
  cursor: pointer;
  
  -webkit-transform: rotatex(360deg);
     -moz-transform: rotatex(360deg);
      -ms-transform: rotatex(360deg);
          transform: rotatex(360deg);
}

<div class="rotate">
    <div class="rotate-inner">HOVER ME</div>
</div>

- fboes