CSS translate3d在悬停（Chrome）时无序缩放

CSS 3d变换基本上是在悬停事件上跳跃（或无序缩放）。 要查看此故障，您需要快速地将鼠标悬停几次（仅限Chrome）

代码尽可能简单：

<div></div>

div {
    width: 50px;
    height:50px;
    background: blue;
    -webkit-transition: -webkit-transform 0.3s ease-out,
                        background 0.3s ease-out;
}
div:hover {
    background: red;
    -webkit-transform: perspective(100px) translate3d(10px, 10px, 20px);
}

div{
宽度：50px；
高度：50px；
背景：蓝色；
-webkit转换：-webkit转换0.3s缓解，
背景0.3s放松；
}
div:悬停{
背景：红色；
-webkit转换：透视图（100px）转换3D（10px，10px，20px）；
}

我已尝试附加-webkit背面可见性：隐藏；正如我在Chrome的相关跳跃/闪烁问题中发现的，但在我的情况下，它根本没有起到任何作用

---

有人知道这个问题吗？或者我做错了什么？

发生这种情况是因为您没有在元素的

：hover

状态之前提供任何默认的translate值。只需为这些添加默认值，问题就会消失：

例1

div{
宽度：50px；
高度：50px；
背景：蓝色；
-webkit转换：-webkit转换0.3s缓解，
背景0.3s放松；
-webkit转换：translate3d（0,0,0）；
}

例2

div:n子级（2）{
背景：rgba（0,0255,5）；
-webkit转换：translateZ（0）；
}

---

.

我在您的代码中也遇到了同样的问题。你能检查一下第一个例子吗？它要多得多simple@Alex您在看哪个示例，使用哪个浏览器？我的答案中的两个例子似乎在Chrome中都正常工作。@Alex请参阅我答案中的例子1。这使用

-webkit转换：translate3d（0,0,0）好的，是的，现在我明白了。我弄糊涂了，有太多的标签页打开了：谢谢！