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

我有一个包含五张图片的标头。我希望图像在悬停时向上过渡10像素，但由于某些原因，它们只是立即向上移动而不能平滑向上移动。我正在使用Google Chrome。

    .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。那就是它的样子

最佳答案

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

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

关于css - 无法获取图像链接以使用translate3d悬停，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21814805/