CSS3 大小缩放scale()scalex()scaley()应用实例

　　制作动画，物体的大小变化自然少不了，CSS3也相应新增了对象大小缩放属性scale。scale用于控制对象2D缩放，即或沿X轴或沿Y轴缩放，所以它又可细分为scalex和scaley，前者用于控制对象沿X轴缩放，后者用于控制对象沿Y轴缩放。

　　当然，scale除能2D缩放外，还能3D缩放，需要在scale的基础上加上3d；本篇先介绍2d缩放的语法规则和应用实例，3d缩放在另外一篇文章单独介绍。以下是scale()、scalex()和scaley()的语法规则和应用实例。

 

　　一、对象大小缩放语法规则

　　1、scalex语法规则

　　 scalex(<number>)

　　 scalex 设置对象沿X轴缩放，表达式中的 <number>，是设置对象大小缩放的尺寸，取值范围[0,1]，如 0.6。

 

　　2、scaley语法规则

　　scaley(<number>)

　　scaley 设置对象沿Y轴缩放，表达式中的 <number>，同样是设置对象大小缩放的尺寸，取值范围[0,1]，如 0.8。

 

　　3、scale语法规则

　　scale(<number>[, <number> ? ])

　　scale用于设置对象的2D缩放，第一个 <number> 设置沿X轴缩放，第二个 <number> 设置沿Y轴缩放。第二个 <number> 可以省略，如果省略默认用第一个 <number> 的值。它们的取值范围均为[0,1]。

 

　　二、scalex()、scaley()和scale()应用实例

　　1、scalex()应用实例

　　html代码：

　　<div class="div">原始大小</div>

　　<div class="div scalex">transform:scalex(.8);</div>

　　CSS样式：

　　.div{border:1px solid #ab9595;width:280px;height:120px;background-color:#e3e2e0; padding:10px;}

　　.scalex{transform:scalex(.8); margin-top:10px;}

　　效果图：

　　从效果图中可以看出，div 和文字都沿X轴方向缩放到了原始大小的80%。

 

　　2、rotatey()应用实例

　　html代码：

　　<div class="div scaley">transform:scaley(.6);</div>

　　CSS样式：

　　.scaley{transform:scaley(.6); margin-top:10px;}

　　效果图：

 

　　从上图可以看出，div 和文字都沿Y轴方向缩放到了原始大小的60%，变小非常明显。

 

　　3、rotate()应用实例

　　html代码：

　　<div class="div scale">transform:scale(.5, .5);</div>

　　CSS样式：

　　.scale{transform:scale(.5, .5); margin-top:10px;}

　　效果图：

 

　　从图中可以看出，div 和文字都沿X轴和Y轴都缩放到了原始大小的50%。