一、IE和Chrome等瀏覽器與zoom
還在幾年前，zoom還只是IE瀏覽器自己私有的玩具，但是，現在，除了FireFox瀏覽器，其他，尤其Chrome和移動端瀏覽器已經很好支持zoom屬性了：
https://image.zhangxinxu.com/image/blog/201801/2018-01-09_002325.png
zoom的字面意思是“變焦”，攝影的時候常用到的一個概念。對於web上的zoom效果，你也可以按照此概念理解。可以改變頁面上元素的尺寸，屬於真實尺寸。
在舊的web時代。*zoom: 1可以給IE6/IE7瀏覽器增加haslayout, 用來清除浮動，修復一些佈局上的疑難雜症等。
其支持的值類型有：
百分比值：zoom:50%，表示縮小到原來的一半。
數值：zoom:0.5，表示縮小到原來的一半。
normal關鍵字：zoom:normal等同於zoom:1.
注意，雖然Chrome/Safari瀏覽器支持了zoom屬性，但是，其實zoom並不是標準屬性。
二、CSS3 transform下的scale
而transform下的scale就不一樣了，是明明確確寫入規範的。從IE9+到其他現代瀏覽器都支持。語法爲：transform: scale( []). 同時有scaleX, scaleY專門的x, y方向的控制。
和zoom不同，scale並不支持百分比值和normal關鍵字，只能是數值。而且，還能是負數，沒錯，負數。而zoom不能是負值！
三、zoom和scale更深層次的差異
先總結下上面表面所見的差異：
瀏覽器兼容性。IE全族/Chrome/Safari和IE9+現代瀏覽器的差別。
控制縮放的值不一樣。zoom更全面，但是不能是負數，只能等比例控制；而scale雖然只能是數值，但是能負數，可以只控制1個維度。
然而，更深層次的差異才是更重要的。
您可以狠狠地點擊這裏：zoom和scale對比demo
從demo我們看出如下幾點差異：
zoom的縮放是相對於左上角的；而scale默認是居中縮放；
zoom的縮放改變了元素佔據的空間大小；而scale的縮放佔據的原始尺寸不變，頁面佈局不會發生變化；
zoom和scale對元素的渲染計算方法可能有差異（如下截圖示意）。
更新於2018-01-09
今天又測了下，發現Chrome瀏覽器下已經幾乎看不出兩者渲染差異了。此tips作廢。
對文字的縮放規則不一致。zoom縮放依然受限於最小12像素中文大小限制；而scale就是純粹的對圖形進行比例控制，文字50%原來尺寸。
文字控制規則差異
然後，還有一個肉眼看不見卻更重要的差異，渲染的性能差異明顯。
由於zoom的縮放會改變元素的真實空間大小，換句話說，實時影響了其他小夥伴。
根據我的一些同事的測試，在文檔流中zoom加在任意一個元素上都會引起一整個頁面的重新渲染，而scale只是在當前的元素上重繪。這其實很好理解，對吧。scale呢變化時候，其原本的尺寸是不變的，因此，就沒有layout的重計算；但是zoom牽一髮動全身，就麻煩地多！
這就讓我們要斟酌下移動端一些功能的實現了。
我們要實現元素的縮放效果，可以使用CSS3 animation, 但是存在這樣一種情況，就是元素原本就使用了一些transform屬性進行，此時，再使用scale進行animation縮放，就會覆蓋原來的值，事情就會變得麻煩。
聰明的小夥伴想到了一個方法，就是使用zoom做動畫。從效果上講，zoom是可以的；但是，從性能上講，大家就要掂量掂量了，不要弄好後，發現某些Android機子下面動畫就像便祕一樣，屎拉了一半懸着就是掉不下來，你就有的搞了。
我能說的就這麼多，其他靠你自己了！
四、結束語
今年的QQ公衆號項目就有使用zoom/scale, 實現圖片hover放大的效果.IE7/IE8使用zoom, 其他瀏覽器使用CSS3 transform scale值實現。至於zoom縮放不是按照中心點縮放的這個兼容性差異，通過使用「海洋布局」實現，具體可參考“IE下zoom或Matrix矩陣濾鏡中心點變換實現”一文，其中就有兼容使用zoom/scale的例子。
在移動端，大家也可以使用zoom進行一些靜態內容的控制，可以避免爲了scale而佔有translate, rotate, skew等公用的transform屬性。
需要注意的是，Chrome等瀏覽器下，zoom/scale不要同時使用，因爲，縮放效果會累加。如下圖所示的4倍變小：
轉自：https://www.zhangxinxu.com/wordpress/2015/11/zoom-transform-scale-diff/