菜单

小tips: zoom和transform:scale的界别

2018年11月19日 - CSS/CSS3

小tips: zoom和transform:scale的区别

2015/11/03 · CSS ·
transform,
zoom

原文出处:
张鑫旭   

  一、什么是zoom

平等、IE和Chrome等浏览器与zoom

尚当几乎年前,zoom还只有是IE浏览器自己个人的玩意儿,但是,现在,除了FireFox浏览器,其他,尤其Chrome和运动端浏览器都十分好支持zoom属性了:

图片 1

zoom的字面意思是“变焦”,摄影的时常用到之一个概念。对于web上的zoom效果,你吧足以以这个概念理解。可以变更页面上元素的尺寸,属于真实尺寸。

在旧的web时代。*zoom: 1可吃IE6/IE7浏览器增加haslayout,
用来排遣浮动,修复一些搭架子及之疑难杂症等。

那个支持之值类型有:

小心,虽然Chrome/Safari浏览器支持了zoom属性,但是,其实zoom并无是标准属性。

  于咱们举行项目和查别人的网页的上总会于有的元素的体里,看到出一个军械孤零零的消在那里,它到底是孰呢?

二、CSS3 transform下的scale

transform下的scale就是未均等了,是明白确确写副规范的。从IE9+到其他现代浏览器都支持。语法为:transform: scale(<x> [<y>]).
同时有scaleXscaleY专门的xy大势的主宰。

zoom不同,scale连无支持百分比率和normal最主要字,只能是数值。而且,还会是负数,没错,负数。而zoom免克是负值!

  图片 2

老三、zoom和scale更深层次之异样

事先总结下方面标所表现底差距:

  1. 浏览器兼容性。IE全族/Chrome/Safari和IE9+现代浏览器的反差。
  2. 支配缩放的值未雷同。zoom双重周全,但是非克是负数,只能等比例控制;而scale虽说只能是数值,但是会负数,可以只有控制1个维度。

但,更特别层次的距离才是双重要紧之。

卿可以狠狠地点击这里:zoom和scale对比demo

自打demo我们看出如下几点距离:

  1. zoom的缩放是相对于左上角的;而scale默认是身处中缩放;
  2. zoom的缩放改变了元素占据的长空尺寸;而scale的缩放占据的原始尺寸不移,页面布局不见面发生变化;
  3. zoom和scale对素的渲染计算办法恐怕产生出入(如下截图示意)。图片 3
  4. 针对文字的缩放规则不一致。zoom缩放依然受限于最小12如从中文大小限制;而scale就是彻头彻尾的对准图纸进行比例控制,文字50%原尺寸。

图片 4

然后,还有一个肉眼看不显现也再次关键的异样,渲染之习性差异明显

由zoom的缩放会改变元素的实际空间尺寸,换句话说,实时影响了任何小伙伴。

根据自己的一对同事的测试,在文档流中zoom加于自由一个素上还见面唤起一整个页面的再渲染,而scale只是以此时此刻之素上重绘。这实质上非常好掌握,对吧。scale呢变化上,其本来的尺码是不转移的,因此,就不曾layout的重新算;但是zoom牵一动员全身,就烦地大多!

当即就受咱而琢磨下活动端有效的兑现了。

俺们如果落实要素的缩放效果,可以用CSS3 animation,
但是存在这么平等种植情形,就是因素原本就是下了一些transform特性进行,此时,再使用scale进行animation缩放,就会挂原来的值,事情就是见面换得烦。

精明能干的伴想到了一个术,就是运用zoom举行动画。从成效达到称,zoom是可的;但是,从性能及摆,大家即将掂量掂量了,不要行好后,发现一些Android机子下面动画就比如便秘一样,屎拉了一半悬挂在即是丢失不下,你就有的搞了。

本身力所能及说的哪怕如此多,其他因你自己了!图片 5

  它的名给zoom,zoom的意思是“变焦”,虽然以照相之圈子时于波及,但是在web的社会风气里也可这样理解它的意,就是改元素的尺寸,进行等比例的缩放。

四、结束语

本年之QQ公众号路就时有发生以zoom/scale,
实现图片hover放大的效果.IE7/IE8使用zoom,
其他浏览器采用CSS3 transform scale价值实现。至于zoom缩放不是随中心点缩放的之兼容性差异,通过动用「海洋布局」实现,具体可参照“IE下zoom或Matrix矩阵滤镜中心点变换实现”一中和,其中便发配合使用zoom/scale的例子。

于移动端,大家也可采取zoom开展部分静态内容之控制,可以避以scale而占有translaterotateskew等于公用的transform属性。

消专注的是,Chrome等浏览器下,zoom/scale绝不以以,因为,缩放效果会加上。如下图所出示之4加倍变多少:
图片 6

1 赞 2 收藏
评论

图片 7

  在前期的那些尴尬的年华里,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

  图片 8       
  图片 9         
 图片 10

  我们得看来:

  1.transform:scale是盖图片的中坚开展缩放,并且图片占据的原始尺寸不转移,文字还在图下方。

    
zoom的方式虽然是因图表的左上角进行缩放,使图片占据的原始尺寸也随着变动,文字的职来了转。

  2.transform:scale不会见转布局,而zoom会改变布局。

  3.transform:scale会如图片的渲染变得模糊。

          zoom                  transform:scale

  图片 11  图片 12

  4.由于地方两摆放图可以看出要缩放的元素被发出文,zoom的艺术就会使字体缩小到浏览器最小书12px,而transform:scale则会于文跟随图片并缩放。

 

  由于zoom的缩放会改变元素占据空间的深浅,从而影响至其他因素的布局,所以当使用的时即便劳动的大多,所以要是考虑到响应式和移动端,就要好好斟酌一下_(:зゝ∠)_

  当然是为此zoom来开动画也是足以的~不过还是那么句话,注意她会改布局哦~

  四、总结

  transform:scale和zoom的分别可以总结也以下几点:

  值的类型 兼容性 缩放基点 渲染 原始尺寸 字体
transform:scale 数值(可为负) IE9以上版本以及其他现代浏览器 元素中心 模糊 原始尺寸不变

字体随元素缩放

zoom 数值(不可为负)、百分比、normal 除FireFox以外的所有浏览器 元素左上角 不模糊 原始尺寸一起缩放 字体随元素缩放,但最小只能到达浏览器最小尺寸12px

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图