博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css3动画属性系列之transform细讲scale缩放
阅读量:6253 次
发布时间:2019-06-22

本文共 605 字,大约阅读时间需要 2 分钟。

hot3.png

上一篇讲了,这一次我们再细讲一下scale.

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

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

  • X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数
  • Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准

CSS代码: 

transform:scale(2,2.5);

 

2、scaleX(<number>) 元素只在X轴(水平方向)缩放元素。

  • 默认值是1,基点一样在元素的中心位置。可以通过transform-origin来改变基点

CSS代码:

transform:scaleX(2);

3、scaleY(<number>) 元素只在Y轴(垂直方向)缩放元素。

  • 基点一样在元素的中心位置。可以通过transform-origin来改变基点。

CSS代码:

transform:scaleY(2);

最后我们看看兼容性写法

CSS代码:

.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;	}

 

转载于:https://my.oschina.net/AaronDMC/blog/751080

你可能感兴趣的文章
信息检索Reading List
查看>>
Advanced Customization of the jQuery Mobile Buttons | Appcropolis
查看>>
ubuntu配置bridge网桥
查看>>
批量修改sharepoint 2013站点里区域设置
查看>>
在尝试重新安装一个服务时遇到这样的错误:指定服务已标记为删除
查看>>
我的Android开发相关文章
查看>>
20141029
查看>>
Windows Server 2012如果打开网页慢下载快的话
查看>>
【反传销】春节一个短暂误入传销和脱身的真实故事以及对技术的思考(二)回家之路...
查看>>
166. Fraction to Recurring Decimal
查看>>
(转)Java线程:新特征-条件变量
查看>>
建立ORACLE10G DATA GUARD---&gt;Physical Standby
查看>>
Python pyenv
查看>>
使用LotusScript操作Lotus Notes RTF域
查看>>
IPv4头部结构具体解释
查看>>
帕雷托最优(Pareto optimality)、帕雷托效率(Pareto efficiency)
查看>>
PHP 面向对象
查看>>
getResourceAsStream和getResource的用法及Demo实例
查看>>
[C#] string 与 String,大 S 与小 S 之间没有什么不可言说的秘密
查看>>
javascript 自定义错误处理
查看>>