html5 scale绽放图片,scale()[缩放]

语法

transform:scale([, ]);

语法项目

说明

初始值

none

适用于

块元素和行内元素

可否继承

否

取值

正数，负数

媒介

视觉

版本

CSS3.0

说明

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

取值

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

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

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

scaleZ():表示只在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+

上一篇: rotate()[旋转]下一篇: translate()[位移]