css中zoom和transform:scale的区别

一、zoom

设置或检索对象的缩放比例，适用于所有元素
zoom：normal(默认值) | |

兼容性

除了FireFox浏览器，其他，尤其Chrome和移动端浏览器已经很好支持zoom属性了
注意，虽然Chrome/Safari浏览器支持了zoom属性，但是，其实zoom并不是标准属性。

二、css3 transform:scale

transform: scale( []):2D 缩放转换。同时有scaleX, scaleY专门的x, y方向的控制。

和zoom不同，scale并不支持百分比值和normal关键字，只能是数值。而且，还能是负数。

三、zoom和scale更深层次的差异

1.zoom 缩放会改变元素真实空间大小

默认

zoom缩放

transform缩放

在文档流中zoom加在任意一个元素上都会引起一整个页面的重新渲染，而scale只是在当前的元素上重绘。scale呢变化时候，其原本的尺寸是不变的，因此，就没有layout的重计算；但是zoom牵一发动全身，就麻烦地多！
2.对文字的缩放规则不一致:zoom的缩放依然受限于最小12px的中文大小限制；而scale就是纯粹就图形进行比例控制，文字50%原来尺寸。

image.png

image.png