首页  >  文章  >  web前端  >  css3的transform中scale缩放的分析

css3的transform中scale缩放的分析

不言
不言原创
2018-06-11 15:10:202214浏览

这篇文章主要介绍了css3的transform中scale缩放的使用方法,需要的朋友可以参考下

下面我们从3个方面开始介绍:

1、scale(x,y) 对元素进行缩放

X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数
Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。
transform:scale(2,2.5); 
2、scaleX(d80b5def5ed1be6e26d91c2709f14170) 元素只在X轴(水平方向)缩放元素。
默认值是1,基点一样在元素的中心位置。可以通过transform-origin来改变基点
transform:scaleX(2); 
3、scaleY(d80b5def5ed1be6e26d91c2709f14170) 元素只在Y轴(垂直方向)缩放元素。
基点一样在元素的中心位置。可以通过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;   
}

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

关于CSS的背景background和background-position的分析

关于CSS中的before和:after伪元素的使用分析

以上是css3的transform中scale缩放的分析的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn