我有一个包含五张图片的标题。我希望图像在悬停时向上过渡 10px,但由于某种原因,它们只是立即向上移动并且不会平滑地向上移动。我正在使用谷歌浏览器。
.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/