2D转换下的zoom和transform:scale的区别

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、什么是zoom

在我们做项目和查看别人的网页的时候总会在一些元素的样式里，看到有一个家伙孤零零的待在那里，它到底是谁呢？

它的名字叫zoom，zoom的意思是“变焦”，虽然在摄影的领域经常被提到，但是在web的世界里也可以这样理解它的意思，就是改变元素的尺寸，进行等比例的缩放。

在最初的那些尴尬的岁月里，zoom只能被IE浏览器兼容，但是现在能被除了FireFox以外的所有浏览器支持，甚至是移动端浏览器。

zoom的值的类型可以是：

1.数值：0~1 当数值为0.5时，表示缩小为原来的一半 zoom:0.5;

2.百分比：0%~100% 当数值为50%时，表示缩小为原来的一半 zoom:50%;

3.关键字normal：表示缩小为原来的一半 zoom:normal;

二、transform:scale

在css3下的transform:scale是写入css规范里面的属性，从IE9以上版本到其他浏览器都支持。

语法（仅2D转换）：

transform: scale(x,y);
transform: scaleX(x);
transform: scaleY(y);

首先从这里就可以看出，scale是可以单独控制X轴或Y轴方向上的缩放。

并且zoom与scale最基本的区别就在于zoom可以使用数值、百分比和关键字normal，而scale只能使用数值，但scale的值可以使用负数！

三、zoom与transform:scale的具体区别

当我们给一张图片使用两种方式进行缩放时，他们的区别就很明显了。

使用transform:scale缩小为原来的一半：

img{
transform: scale(0.5,0.5);
}

使用zoom缩小为原来的一半：

img{
zoom: 0.5;
}

将使用两种方法缩小后的截图放在一起跟原图进行比较：

原图 transform:scale zoom

我们可以看出：

1.transform:scale是以图片的中心进行缩放，并且图片占据的原始尺寸不变，文字依然在图片下方。

zoom的方法则是以图片的左上角进行缩放，使图片占据的原始尺寸也跟着改变，文字的位置发生了改变。

2.transform:scale不会改变布局，而zoom会改变布局。

3.transform:scale会使图片的渲染变得模糊。

zoom transform:scale

4.由上面两张图可以看出如果缩放的元素中有文字，zoom的方法只能使字体缩小到浏览器最小字体12px，而transform:scale则会让文字跟随图片一起缩放。

由于zoom的缩放会改变元素占据空间的大小，从而影响到其他元素的布局，所以在应用的时候就麻烦的多，所以如果考虑到响应式和移动端，就要好好斟酌一下_(:зゝ∠)_

当然是用zoom来做动画也是可以的~不过还是那句话，注意它会改变布局哦~

四、总结

transform:scale和zoom的区别可以总结为以下几点：