Css 缩放与变换比例

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

当您为CSS伪状态设置了转换持续时间时，设置zoom属性将缩放悬停元素，但一旦它达到其最大大小，它将收缩回较小的大小（但此大小仍大于原始大小）

但是，当对相同的变换使用

x-transform:scale（）

属性时，项目会平滑缩放（并保持其中心坐标，我可能会添加）

你可以从中看到这一点。红色框向右和向下增长，但随后跳回到较小的尺寸，而蓝色框平稳增长并保持完整尺寸

为什么会这样

*
{
    -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

不是其中一个选项

出现的情况是：光标进入红色框，它立即假定缩放值的大小。然后，

转换

开始，并在已缩放的元素上应用第二次缩放。转换完成后，该框将恢复为原始的

zoom

值

通过在转换后停止动画（使用

transitionend

上的警报，我可以测量长方体，并看到它的宽度为121px（100px*1.1*1.1）。因此

缩放看起来确实应用了两次

不知道它为什么会这样，但由于它不是受支持的动画效果，因此没有真正预期的行为。
zoom:XXX；让我们缩放（完成）浏览器视口。CSS变换和转换将专门从浏览器进行处理。
zoom
和
transform:scale
的工作方式不同。
zoom
实际上会缩放节点的大小，而
transform:scale
则会缩放节点的视图大小。另外，如果我没记错的话，
zoom
只能保证ed在IE中工作；Chrome出于某种原因支持它，但其他浏览器不支持它。@Passenger很有趣。你能解释一下我描述的奇怪行为吗？节点将增长到我输入的缩放大小的两倍左右（1.2而不是1.1），然后缩小到我指定的大小？@David我不知道这一点。。。