| 语法项目 | 说明 |
|---|---|
| 初始值 | none |
| 适用于 | 块元素和行内元素 |
| 可否继承 | 否 |
| 取值 | 正数，负数 |
| 媒介 | 视觉 |
| 版本 | CSS3.0 |
scale()函数能够缩放元素。
scale(<number>[, <number>]);表示使元素在X轴和Y轴同时缩放。<number>表示缩放倍数，可以是正数，负数和小数。负数是先翻转元素然后再缩放。包含两个参数，如果缺少第二个参数，那么第二个参数的值等于第一个参数。
scaleX(<number>):表示只在X轴(水平方向)缩放元素。
scaleY(<number>):表示只在Y轴(垂直方向)缩放元素。
scaleZ(<number>):表示只在Z轴缩放元素。前提是元素本身或者元素的父元素设定了透视值
.scale_1{
-webkit-transform:scale(0.8,1.2);
-moz-transform:scale(0.8,1.2);
position:absolute;
left:0;
top:80px;
background:#4d6ea6;
}
.scale_2{
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
position:absolute;
left:200px;
top:80px;
background:#b9f9cb;
}
.scale_3{
-webkit-transform:scale(-1.2,1.2);
-moz-transform:scale(-1.2,1.2);
position:absolute;
left:450px;
top:80px;
}<div class="demo_box scale_1">宽度缩小80%，高度放大120%</div> <div class="demo_box scale_2">宽高同时缩小一半</div> <div class="demo_box scale_3">先翻转再放大1.2倍</div>
| IE | Firefox | Opera | Safari | Chrome |
|---|---|---|---|---|
| IE 10+ | Firefox 3.5+ | Opera 11.50+ | Safari 10+ | Chrome 2.0+ |