scale()

语法

transform:scale(<number>[, <number>]);
语法项目 说明
初始值 none
适用于 块元素和行内元素
可否继承 否
取值 正数，负数
媒介 视觉
版本 CSS3.0

说明

scale()函数能够缩放元素。

取值

scale(<number>[, <number>]);表示使元素在X轴和Y轴同时缩放。<number>表示缩放倍数，可以是正数，负数和小数。负数是先翻转元素然后再缩放。包含两个参数，如果缺少第二个参数，那么第二个参数的值等于第一个参数。

scaleX(<number>):表示只在X轴(水平方向)缩放元素。

scaleY(<number>):表示只在Y轴(垂直方向)缩放元素。

scaleZ(<number>):表示只在Z轴缩放元素。前提是元素本身或者元素的父元素设定了透视值

实例代码

CSS 复制代码
 
.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;
}
HTML 复制代码
 
<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+

参考文献

修改 重新运行 关闭