轉自：http://www.web-tinker.com/article/20610.html
zoom和scale這兩個東西都是用於對元素的縮放，但兩者除了兼容性之外還有一些不同的地方。zoom縮放會將元素保持在左上角，而scale默認是中間位置，可以通過transform-origin來設置。另外他們執行的渲染順序也不同zoom可能影響到盒子的計算。運行<!DOCTYPE html>
<style>
div {
width:300px;height:100px;
border:1px solid #CCC;
font-size:0px;
line-height:100px;
margin:10px;
}
span {
display:inline-block;
height:80px;width:200px;background:#F5F5F5;
vertical-align:middle;
overflow:hidden;
}
</style>
<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上不支持，但這是個很古老的特性了。它和第二個測試的區別是它先縮放，后計算布局。所以在例子中它得到了垂直居中效果。