css3的transform中scale放缩详解

日期:2020-08-22 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

下面大家从3个层面刚开始详细介绍:

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); 

最终大家看看适配性写法:


拷贝编码
编码以下:

.test{
-moz-transform:scale(2,2);
-webkit-transform:scale(2,2);
-o-transform:scale(2,2);
background:url(img/i.png) no-repeat;
width:198px;
height:133px;
}