admin #缩放比例——scale()
—在CSS3中，可以使用transform属性的scale()方法来实现元素的缩放效果。
缩放，指的是“缩小”和“放大”的意思。- scale()方法跟translate()方法类似，缩放也有3种情况：scaleX()、scaleY()、scale()，参数x表示元素在x轴方向的缩放倍数，参数y表示元素在y轴方向的缩放倍数。
### 有以下几种情况：
1. transform: scale(x, y);里面写的数字不跟单位 就是倍数的意思 1 就是1倍 2就是 2倍
2. transform: scale(2, 1);修改了宽度为原来的2倍 高度 不变
3. transform: scale(2);等比例缩放 同时修改宽度和高度，我们有简单的写法 以下是 宽度修改了2倍，高度默认和第一个参数一样
4. transform: scale, 0.5); transform: scale); 我们可以进行缩小 小于1 就是缩放
5. scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点
### 例子
```css
...
.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);
}
...
```
```html
<body>
<div class="demo1">我是可以放大2倍</div>
<div class="demo2">我是可以缩小1/2倍</div>
<div class="demo3">我没有变化</div>
</body>
```
### 输出结果
### 如果对你有所帮助，欢迎点赞收藏哦，共同进步哦！！
[「链接」](https://itsxzjz.github.io/)