css - 无法使用 translate3d 悬停图像链接

Question

我有一个带有五个图像的标题。我希望图像在悬停时向上过渡 10 像素，但由于某种原因，它们只是立即向上移动并且不会平稳上升。我正在使用谷歌浏览器。

    .navbar img {
        position: relative;
        top: 0px;
        transition: transform .2s ease-in-out;
    }

    .navbar img:hover {
        transform: translate3d(0px, -10px, 0px);
        -webkit-transform: translate3d(0px, -10px, 0px);
    }

您可以查找该网站，http ://pannariz.com 。这就是它的样子

Answer 1

您可以尝试-webkit-transition: all .2s ease-in-out;，因为您只应用变换。

您也可以尝试-webkit-transition: -webkit-transform .2s ease-in-out;作为 webkit 浏览器的另一种解决方案。