CSS中的zoom特性和scale特性的用法及差别

日期:2020-10-19 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

zoom 特性
英语的语法:
zoom:normal | <number> | <percentage>
默认设置值:normal
可用于:全部元素
承继性:有
赋值:
normal:
应用目标的具体规格。
<number>:
用浮点数来界定放缩占比。不容许负值
<percentage>:
用百分比来界定放缩占比。不容许负值
表明:
设定或查找目标的放缩占比。
对应的脚本制作特点为zoom。

Scale特性
scale特性的赋值为2个,它自身实际上非常于1个涵数,由于它的写法就和涵数1样:
scale();
scale(x);
scale(x,y);
1、scale(x,y) 对元素开展放缩
X表明水平方位放缩的倍数 Y表明竖直方位的放缩倍数
Y是1个可选主要参数,沒有设定的话,则表明X,Y两个方位的放缩倍数是1样的。并以X为准。
transform:scale(2,2.5);
2、scaleX(<number>) 元素只在X轴(水平方位)放缩元素。
默认设置值是1,基点1样在元素的管理中心部位。能够根据transform-origin来更改基点
transform:scaleX(2);
3、scaleY(<number>) 元素只在Y轴(竖直方位)放缩元素。
基点1样在元素的管理中心部位。能够根据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这两个物品全是用于对元素的放缩,但二者除适配性以外也有1些不一样的地区。zoom放缩会将元素维持在左上角,而scale默认设置是正中间部位,能够根据transform-origin来设定。此外她们实行的3D渲染次序也不一样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>