只要给元素添加了scale这个属性,就能控制元素放大或缩小。
语法格式:
transform: scale(x,y);
注意点:
x和y之间用逗号隔开;
transform: scale(1,1):表示宽和高都放大1倍,其实等于没有放大,还是原来的大小;
transform: scale(2,2):宽和高都放大了2倍;
transform: scale(2):只写一个参数,默认第二个参数和第一个参数一样,其实就是简写了,相当于transform: scale(2,2);写起来更方便;
transform: scale(0.5,0.5):表示宽和高都缩小0.5倍;
transform: scale(x,y)最大的优势就是可以设置转换中心点缩放,默认是以中心点缩放。而且不会影响到其他盒子。

div {
     width: 100px;
     height: 100px;
     margin: 10px auto;
     background-color: brown;
     /*让盒子以左下角为中心点放大1.2倍*/
     transform-origin: left bottom;
}
div:hover {
     transform: scale(1.2);
}

当鼠标放到div盒子上,盒子会以左下角为中心点放大1.2倍,且不会影响到其他元素。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐