再来说说css3 2Dtransform之scale,
该属性理解也很简单,可以让元素在水平和垂直方向进行缩放,请注意缩放这个词语,说明它是既可以将元素方法,也可以将元素缩小的。该属性的用法如下:
transform:scale(水平缩放比例,垂直缩放比例)//注意是缩放比例,是不用带单位的,表示元素的宽高*对应的比例即为缩放的具体值。
直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scale</title>
<style>
*{ padding: 0; margin: 0;}
div{
margin:100px auto;
width: 100px;
height: 100px;
background-color: #f00;
transform: scale(1.1,2.1);//水平放大1.1,垂直放大2.1
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果图如下:
补充一点:一般情况下,scale是传入两个值的,但是如果当水平和垂直的缩放比例相同,则两个值可以进行合并为一个。比如水平和垂直缩放都是1.1倍,那么就可以写成transform:scale(1.1)。