专业网站建设品牌，18年专业建站经验，服务6000+客户--广州松河
免费热线：400-963-0016      微信咨询  |  联系我们
位置：广州松河 > 技术支持 > css3动画属性系列之transform细讲scale缩放
来源：网络整理     时间：2023/2/14 0:12:48    共 3679 浏览

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

 

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

 

  • X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数
  • Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。
Css代码  
  1. transform:scale(2,2.5);  
  2、scaleX(<number>) 元素只在X轴（水平方向）缩放元素。
  • 默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点
Css代码  
  1. transform:scaleX(2);  
  3、scaleY(<number>) 元素只在Y轴（垂直方向）缩放元素。
  • 基点一样在元素的中心位置。可以通过transform-origin来改变基点。
Css代码  
  1. transform:scaleY(2);  
 
最后我们看看兼容性写法：
Css代码  
  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. } 
版权说明：
本网站凡注明“广州松河 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。
·上一条：PayPal付款页面添加公司标识 | ·下一条：css3中transition hover中的书写顺序差异

Copyright © 广州松河信息科技有限公司 2005-2026 版权所有    粤ICP备16019765号 

广州松河信息科技有限公司 版权所有