作者：蔣宇捷（hfahe） 版權聲明：原創作品，歡迎轉載，轉載時請務必以超鏈接形式標明文章原始出處?、作者信息和本聲明。 ? ? ??css3提供了強大的transform屬性來實現動畫效果。下面我簡介一下如何用css3來實現瀏覽器里的縮放功能。 **HTML頁面** ???????我們先寫一個簡單的頁面，以測試頁面縮放的代碼。  ??????? 頁面上有兩個按鈕，一個放大，點擊后放大頁面，一個縮小，點擊后縮小頁面。 **Javascript代碼** ??????? 利用transform:scale(縮放比例)設置body的比例可以將頁面整體進行縮放。編寫JS代碼如下所示： ~~~ * var size = 1.0; function zoomout() { size = size + 0.1; set(); } function zoomin() { size = size - 0.1; set(); } function set() { document.body.style.cssText = document.body.style.cssText + '; -webkit-transform: scale(' + size + '); '; }?* ~~~ ??????? 縮放的效果如下圖所示：  ??????? 這個效果和Chrome的效果比較類似，但是和我們預期的效果有一些差別：現在的縮放是以div的中心進行縮放，我們希望縮放是以左上角為原點進行，那么，應該如何解決這個問題呢？ ??????? css3還有一個屬性叫做transform-origin，用于設定transform的起點，默認值是元素的中點，我們需要將它設置為左上角以滿足需求。修改樣式設置代碼如下： ~~~ * document.body.style.cssText = document.body.style.cssText + '; -webkit-transform: scale(' + size + ');-webkit-transform-origin: 0 0;';?* ~~~ ??????? 新的效果如下：  **與瀏覽器結合** ???????? Chrome插件的實現十分簡單，就是直接在background.html插入上述腳本調用。 ??????? 要實現瀏覽器的原生功能，在cefFrame的executeJavascript方法中直接運行上述JS腳本即可。 ??????? 采用上述方法，我們可以用JS實現瀏覽器里的很多功能，例如圖片旋轉、頁面字體設置等等。