Question

受到Design Shack的启发，我想让一些可链接的照片在悬停时略微放大。但是，我希望动画能够居中，所以就像我们稍微放大一样。

为了保持图像居中，我摆弄了顶部，左边，边缘顶部和边缘左边以使其工作。我甚至不确定它是如何工作的:-)但是它有效...

...除了动画实际上有点不稳定和跳跃，至少在Safari中 - 最糟糕的是在10.9的Safari中。（虽然Firefox和Chrome做得更好。）

重要的一点：

.card img:hover {
    height:110%;
    width:110%;

    top:10%;
    left:-10%;
    margin-top:-10%;
    margin-left:5%;
}

将跳跃动画与不尝试居中的版本进行比较，此处： http://jsfiddle.net/MnHVk/2/

任何人都可以想到任何其他方式来做这个不会导致这种跳跃效果的悬停动画吗？也许还有其他一些调整定位的技术，这样当图像悬停时，它会平滑移动？

Answer 1

如果你使用变换，它应该通过GPU渲染，我认为，顺利

.card img:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);

    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%;
}

updated demo

保持图像居中时，纯CSS悬停过渡是跳跃的（在Safari中）

1 个答案: