缩放与变换比例

Question

我在为我的一个网站开发 onHover 缩放效果时遇到了这个问题。

当您为 CSS 伪状态设置了过渡持续时间时，设置 zoom 属性将缩放 onHover 元素，但是一旦它达到最大尺寸，它就会缩小到更小的尺寸（但这个尺寸仍然比原始尺寸大） .

但是，当使用x-transform: scale()具有相同过渡的属性时，项目会平滑缩放（并保持其中心坐标，我可能会补充）。

你可以在这个 fiddle 中看到这一点。红色框向右下方生长，但随后跳回较小的尺寸，而蓝色框则平滑地生长并保持完整尺寸。

为什么是这样？

*
{
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

box:hover
{
    zoom: 1.1;
}

box2:hover
{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

Answer 1

zoom不是受支持的动画属性之一。

似乎发生的情况是这样的：光标进入红色框，它立即呈现该zoom值的大小。然后，transition在已经缩放的元素上第二次应用缩放。转换完成后，该框将恢复为原始zoom值。

通过在转换后停止动画（使用警报，transitionend我可以测量盒子并看到它的宽度为 121px (100px * 1.1 * 1.1)。所以似乎确实zoom被应用了两次。

不知道为什么它会这样，但由于它不是受支持的动画效果，因此并不是真正的预期行为。