缩放——scale()
- 在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。
- scale()方法跟translate()方法类似，缩放也有3种情况：scaleX()、scaleY()、scale()，参数x表示元素在x轴方向的缩放倍数，参数y表示元素在y轴方向的缩放倍数。
有以下几种情况：
- transform: scale(x, y);里面写的数字不跟单位 就是倍数的意思 1 就是1倍 2就是 2倍
- transform: scale(2, 1);修改了宽度为原来的2倍 高度 不变
- transform: scale(2);等比例缩放 同时修改宽度和高度，我们有简单的写法 以下是 宽度修改了2倍，高度默认和第一个参数一样
- transform: scale(0.5, 0.5); transform: scale(0.5); 我们可以进行缩小 小于1 就是缩放
- scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点
例子
...
.demo1 {
width: 200px;
height: 200px;
background-color: skyblue;
margin: 100px auto;
}
.demo2 {
width: 200px;
height: 200px;
background-color: skyblue;
margin: 10px auto;
}
.demo3 {
width: 200px;
height: 200px;
background-color: skyblue;
margin: 10px auto;
}
.demo1:hover {
/* 等比例放大两倍 */
transform: scale(2);
}
.demo2:hover {
/* 等比例缩小1/2倍 */
transform: scale(0.5);
}
...
<body>
<div class="demo1">我是可以放大2倍</div>
<div class="demo2">我是可以缩小1/2倍</div>
<div class="demo3">我没有变化</div>
</body>
输出结果
缩小了.png
放大了.png
