2D转换下的zoom和transform:scale的区别
一、什么是zoom
在我们做项目和查看别人的网页的时候总会在一些元素的样式里,看到有一个家伙孤零零的待在那里,它到底是谁呢?
它的名字叫zoom,zoom的意思是“变焦”,虽然在摄影的领域经常被提到,但是在web的世界里也可以这样理解它的意思,就是改变元素的尺寸,进行等比例的缩放。
在最初的那些尴尬的岁月里,zoom只能被IE浏览器兼容,但是现在能被除了FireFox以外的所有浏览器支持,甚至是移动端浏览器。
zoom的值的类型可以是:
1.数值:0~1 当数值为0.5时,表示缩小为原来的一半 zoom:0.5;
2.百分比:0%~100% 当数值为50%时,表示缩小为原来的一半 zoom:50%;
3.关键字normal: 表示缩小为原来的一半 zoom:normal;
二、transform:scale
在css3下的transform:scale是写入css规范里面的属性,从IE9以上版本到其他浏览器都支持。
语法(仅2D转换):
transform: scale(x,y);
transform: scaleX(x);
transform: scaleY(y);
首先从这里就可以看出,scale是可以单独控制X轴或Y轴方向上的缩放。
并且zoom与scale最基本的区别就在于zoom可以使用数值、百分比和关键字normal,而scale只能使用数值,但scale的值可以使用负数!
三、zoom与transform:scale的具体区别
当我们给一张图片使用两种方式进行缩放时,他们的区别就很明显了。
使用transform:scale缩小为原来的一半:
img{
transform: scale(0.5,0.5);
}
使用zoom缩小为原来的一半:
img{
zoom: 0.5;
}
将使用两种方法缩小后的截图放在一起跟原图进行比较:
原图 transform:scale zoom
我们可以看出:
1.transform:scale是以图片的中心进行缩放,并且图片占据的原始尺寸不变,文字依然在图片下方。
zoom的方法则是以图片的左上角进行缩放,使图片占据的原始尺寸也跟着改变,文字的位置发生了改变。
2.transform:scale不会改变布局,而zoom会改变布局。
3.transform:scale会使图片的渲染变得模糊。
zoom transform:scale
4.由上面两张图可以看出如果缩放的元素中有文字,zoom的方法只能使字体缩小到浏览器最小字体12px,而transform:scale则会让文字跟随图片一起缩放。
由于zoom的缩放会改变元素占据空间的大小,从而影响到其他元素的布局,所以在应用的时候就麻烦的多,所以如果考虑到响应式和移动端,就要好好斟酌一下_(:зゝ∠)_
当然是用zoom来做动画也是可以的~不过还是那句话,注意它会改变布局哦~
四、总结
transform:scale和zoom的区别可以总结为以下几点:
值的类型 | 兼容性 | 缩放基点 | 渲染 | 原始尺寸 | 字体 | |
transform:scale | 数值(可为负) | IE9以上版本以及其他现代浏览器 | 元素中心 | 模糊 | 原始尺寸不变 |
字体随元素缩放 |
zoom | 数值(不可为负)、百分比、normal | 除FireFox以外的所有浏览器 | 元素左上角 | 不模糊 | 原始尺寸一起缩放 | 字体随元素缩放,但最小只能到达浏览器最小尺寸12px |
最新文章
- fir.im Weekly - 2016 年 Android 最佳实践列表
- swiftlint升级
- IOS,发短信,发邮件,打电话
- Areas(区域)
- 绘图quartz之渐变
- xargs mv命令使用方法:ls *.mp3 |xargs -i mv {} /tmp
- WCF随笔3----消息编码器
- springMVC+Java验证码完善注册功能
- 转:LoadRunner获取毫秒及字符串替换实现
- 使用siege对web接口进行post方式的压力测试
- 多个PVSS数据点属性读写的优化处理
- 【XSY2785】模型
- mssql 创建函数简单实例
- eclipse get set 自动添加注释
- SSM前言——相关设计模式
- Android -- DiskLruCache
- iOS App转让流程详情教程篇
- 如何使用 OpenFileDialog 组件 (选择文件组件)
- HDU--4768
- C#中的特性 (Attribute) 入门 (一)