缩放——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 的优势之处: 不会影响其他的盒子 而且可以设置缩放的中心点
例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32...
.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);
}
...1
2
3
4
5<body>
<div class="demo1">我是可以放大2倍</div>
<div class="demo2">我是可以缩小1/2倍</div>
<div class="demo3">我没有变化</div>
</body>输出结果
如果对你有所帮助,欢迎点赞收藏哦,共同进步哦!!
你会了吗?
- 本文作者: it JinZhan
- 本文链接: http://example.com/2021/08/16/2021-8-16-2D缩放——scale-方法/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!