CSS中的zoom属性和scale属性的用法及区别
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS中的zoom属性和scale属性的⽤法及区别
zoom 属性
语法：
zoom：normal | <number> | <percentage>
默认值：normal
适⽤于：所有元素
继承性：有
取值：
normal：
使⽤对象的实际尺⼨。
<number>：
⽤浮点数来定义缩放⽐例。
不允许负值
<percentage>：
⽤百分⽐来定义缩放⽐例。
不允许负值
说明：
设置或检索对象的缩放⽐例。
对应的脚本特性为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(<number>) 元素只在X轴（⽔平⽅向）缩放元素。
默认值是1，基点⼀样在元素的中⼼位置。
可以通过transform-origin来改变基点
transform:scaleX(2);
3、scaleY(<number>) 元素只在Y轴（垂直⽅向）缩放元素。
基点⼀样在元素的中⼼位置。
可以通过transform-origin来改变基点。
transform:scaleY(2);
看看兼容性写法：
CSS Code复制内容到剪贴板
1. .test{
2. -moz-transform:scale(2,2);
3. -webkit-transform:scale(2,2);
4. -o-transform:scale(2,2);
5. background:url(img/i.png) no-repeat;
6. width:198px;
7. height:133px;
8. }
zoom和scale的区别
zoom和scale这两个东西都是⽤于对元素的缩放，但两者除了兼容性之外还有⼀些不同的地⽅。
zoom缩放会将元素保持在左上⾓，⽽scale 默认是中间位置，可以通过transform-origin来设置。
另外他们执⾏的渲染顺序也不同zoom可能影响到盒⼦的计算。
运⾏<!DOCTYPE html>
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>。