css – 缩放与变换比例

2023年5月31日 232次阅读

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

当您为CSS伪状态设置转换持续时间时,设置缩放属性将缩放元素onHover,但是一旦达到它的最大尺寸,它就会缩小到较小的尺寸(但是此尺寸仍然大于原始尺寸) .

但是,当使用具有相同过渡的x-transform：scale()属性时,项目会平滑缩放(并保持其中心坐标,我可能会添加).

您可以在this 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);
}

最佳答案 zoom不是
supported animated properties之一.

似乎正在发生的事情是：光标进入红色框,它立即采用缩放值的大小.然后转换开始并在已经缩放的元素上第二次应用缩放.转换完成后,框将恢复为原始缩放值.

通过在转换后停止动画(使用转发端上的警报,我可以测量该框并看到它的宽度为121px(100px * 1.1 * 1.1).因此缩放看起来似乎被应用了两次.

不知道为什么它表现得像这样但是因为它不是支持的动画效果,所以没有真正预期的行为.

点赞