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

宽度缩小80%,高度放大120%
宽高同时缩小一半
先翻转再放大1.2倍

在线演示

兼容性

IE Firefox Opera Safari Chrome
IE 10+ Firefox 3.5+ Opera 11.50+ Safari 10+ Chrome 2.0+
上一篇: 下一篇: