2D转换下的zoom和transfor:scale的区别
Posted ✎_Vampire✟
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2D转换下的zoom和transfor: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 |
以上是关于2D转换下的zoom和transfor:scale的区别的主要内容,如果未能解决你的问题,请参考以下文章
Google Pixel 超分辨率--Super Resolution Zoom