scale() [缩放] - CSS3 动画手册 - [ CSS3 ]

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+