CSS中的zoom屬性和scale屬性的用法及區別

 　　zoom 屬性

　　語法：

　　zoom：normal | |

　　默認值：normal

　　適用於：所有元素

　　繼承性：有

　　取值：

　　normal：

　　使用對象的實際尺寸。

　　：

　　用浮點數來定義縮放比例。不允許負值

：

　　用百分比來定義縮放比例。不允許負值

　　說明：

　　設置或檢索對象的縮放比例。

　　對應的腳本特性為zoom。

　　Scale屬性

　　scale屬性的取值為2個，它本身其實相當於一個函數，因為它的寫法就和函數一樣：

　　scale();

　　scale(x);

　　scale(x,y);

　　1、scale(x,y) 對元素進行縮放

　　X表示水平方向縮放的倍數 Y表示垂直方向的縮放倍數

　　Y是一個可選參數，沒有設置的話，則表示X，Y兩個方向的縮放倍數是一樣的。並以X為准。

　　transform:scale(2,2.5);

　　2、scaleX() 元素只在X軸(水平方向)縮放元素。

　　默認值是1，基點一樣在元素的中心位置。可以通過transform-origin來改變基點

　　transform:scaleX(2);

　　3、scaleY() 元素只在Y軸(垂直方向)縮放元素。

　　基點一樣在元素的中心位置。可以通過transform-origin來改變基點。

　　transform:scaleY(2);

　　看看兼容性寫法：

　　CSS Code復制內容到剪貼板

　　.test{

　　-moz-transform:scale(2,2);

　　-webkit-transform:scale(2,2);

　　-o-transform:scale(2,2);

　　background:url(img/i.png) no-repeat;

　　width:198px;

　　height:133px;

　　}

　　zoom和scale的區別

　　zoom和scale這兩個東西都是用於對元素的縮放，但兩者除了兼容性之外還有一些不同的地方。zoom縮放會將元素保持在左上角，而scale默認是中間位置，可以通過transform-origin來設置。另外他們執行的渲染順序也不同zoom可能影響到盒子的計算。

　　運行

　CSS Code復制內容到剪貼板

1. <style>
2. div {
3. width:300px;height:100px;
4. border:1px solid #CCC;
5. font-size:0px;
6. line-height:100px;
7. margin:10px;
8. }
9. span {
10. display:inline-block;
11. height:80px;width:200px;background:#F5F5F5;
12. vertical-align:middle;
13. overflow:hidden;
14. }
15. </style>
16. <div>
17. <span style="-webkit-transform:scale(0.5);"></span>
18. </div>
19. <div>
20. <span style="
21. -webkit-transform-origin:top left;
22. -webkit-transform:scale(0.5);
23. "></span>
24. </div>
25. <div>
26. <span style="zoom:0.5;"></span>
27. </div>