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的区别的主要内容,如果未能解决你的问题,请参考以下文章

D3 Zoom 无法读取未定义的属性“转换”

zoom:1

Google Pixel 超分辨率--Super Resolution Zoom

Google Pixel 超分辨率--Super Resolution Zoom

2D 转换

cocos2d-x win8下的环境配置和建立项目