CSS3:2D转换之缩放transform: scale
只要给元素添加了scale这个属性,就能控制元素放大或缩小。语法格式:transform: scale(x,y);注意点:x和y之间用逗号隔开;transform: scale(1,1):表示宽和高都放大1倍,其实等于没有放大,还是原来的大小;transform: scale(2,2):宽和高都放大了2倍;transform: scale(2):只写一个参数,默认第二个参数和第一个参数一样,其实就
·
只要给元素添加了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倍,且不会影响到其他元素。
更多推荐
已为社区贡献9条内容
所有评论(0)