CSS转换在悬停时闪烁

真棒，你用宝贵的时间来阅读我的问题

我正试着在悬停状态下翻转一个div。一切正常，但在过渡期间会闪烁。它看起来好像翻了好几次！这破坏了翻转的整个效果。下面是我的代码和一把小提琴：

小提琴：

对于CSS：

这种闪烁效应是否可以预防？如果是，我该怎么做

---

提前谢谢

如评论中所述：

主要的问题是：在移动（或动画）div上悬停时，您可能只是从元素中取消悬停，因为它在光标下方移动

解决方案：将悬停选择器放置在悬停时不改变其大小的包含元素上：

。旋转{
宽度：200px；高度：80px；
背景：绿色；
}
.旋转。旋转内部{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
-ms转换：均为0.3s；
过渡：均为0.3秒；
填充：20px；
背景色：#333；
文本对齐：居中；
保证金：0自动；
字体系列：无衬线；
颜色：白色；
边框顶部：#E9F01D 3px实心；
}
.旋转：悬停。旋转内部{
字母间距：5px；
颜色：#E9F01D；
光标：指针；
-webkit变换：rotatex（360度）；
-moz变换：rotatex（360度）；
-ms变换：rotatex（360度）；
变换：旋转（360度）；
}

盘旋我

尝试添加此>-webkit背面可见性：隐藏；当您悬停并缩小div时，鼠标指针似乎会离开div（因为它会缩小），导致它再次增长，直到鼠标指针再次接触它。一个可能的解决方案是：将鼠标悬停在父对象上element@fboes这不会对父元素产生完全相同的效果吗？不管怎样，我还是要试一下，只是想知道…我试过了-对你更好吗？

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