CSS/CSS3

基础入门

高级进阶

参考手册

实战案例

CSS3 scale() [缩放]

2017-08-15 21:37:02 来源: 点击:站内收藏

语法

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+
相关热词搜索:css3 scale
评论正在载入