先说原理

zoom和scale这两个器械都是用于对米素的缩放，但两者除了兼容性之外另有一些差别的地方。zoom缩放会将米素保持在左上角，而scale默认是中央位置，可以通过transform-origin来设置。

另外他们执行的渲染顺序也差别zoom可能影响到盒子的盘算。

例子

<style>
div {
	 width:300px;height:100px;
  border:1px solid red;
  font-size:0px;
  line-height:100px;
  margin:10px;
}
span {
  display:inline-block;
  height:80px;width:200px;background:blue;
  vertical-align:middle;
  overflow:hidden;
}
</style>

html

<div>
  <span style="-webkit-transform:scale(0.5);"></span>
</div>
<div>
  <span style="-webkit-transform-origin:top left;-webkit-transform:scale(0.5);"></span>
</div>
<div>
  <span style="zoom:0.5;"></span>
</div>

效果

稍微解释一下

第一个测试中只设置了scale，于是米素以自己的中央为基点做缩放。  

第二个测试中不仅设置了scale，另有origin来将缩放的基点设置到左上角，因此转变竣事后米素呆在了左上角。虽然容器设置了和高度一样的行高，当它并没有在容器里居中，由于scale是先结构后变换的，变换不会对结构产生影响。  

最后一个测试是使用zoom，虽然Firefox上不支持，但这是个很古老的特征了。它和第二个测试的区别是它先缩放，后盘算结构。所以在例子中它得到了垂直居中效果。

zoom与scale的区别总结  

1、兼容性的差异：zoom为非尺度属性，除firefox浏览器已在其他浏览器中得到了优越支持，scale已经是尺度属性除IE8-外现代浏览器均能较好的支持；

2、取值差异：zoom的正当值可以为数值、百分比以及normal而scale则只能为数值；  

3、缩放中央点差异：zoom缩放中央点为左上角，而scale默以为中央点但可以通过transform-origin举行改变；  

4、重绘差异：zoom的缩放改变了米素占有空间的巨细会引起整个页面的重绘而scale缩放所占有的原始尺寸稳固，只在当前米素举行重绘； 

5、渲染盘算方法可能有差异：zoom为锐化，而scale为模糊； 

6、对文字的缩放规则不一致:zoom的缩放依然受限于最小12px的中文巨细限制；而scale就是纯粹就图形举行比例控制，文字50%原来尺寸； 

 7、这点应该是与上一条相似，border为1px的时刻zoom受限于浏览器最小显示1px；而scale就纯粹举行比例控制，不受限。 

链接: http://www.fly63.com/article/detial/6655