悬停时 CSS translate3d 缩放困惑(Chrome)

Question

基本上 CSS 3d 变换在悬停事件上跳跃(或困惑地缩放)。要查看此故障，您需要快速将鼠标悬停进出几次(仅限 Chrome)。

Example 1
Example 2

代码越简单越好:

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

我尝试附加 -webkit-backface-visibility: hidden;因为我在 Chrome 中的相关跳跃/闪烁问题中找到了这个解决方案，但在我的例子中它什么也没做。

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

Answer 1

发生这种情况是因为您没有在元素的 :hover 状态之前提供任何默认的翻译值。只需为这些添加默认值，问题就会消失:

示例 1

div {
    width: 50px;
    height:50px;
    background: blue;
    -webkit-transition: -webkit-transform 0.3s ease-out,
                        background 0.3s ease-out;
    -webkit-transform: translate3d(0, 0, 0);
}

JSFiddle demo .

例子2

div:nth-child(2) {
    background: rgba(0, 0, 255, .5);
    -webkit-transform: translateZ(0);
}

JSFiddle demo .