4.5 2D转换之缩放scale
缩放,顾名思义,可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
缩放
1.语法
transform : scale(x,y);
2.注意
注意其中的x和y用逗号分隔
transform:scale(1,1)︰宽和高都放大一倍,相对于没有放大transform:scale(2,2)︰宽和高都放大了2倍
transform:scale(2):只写一个参数,第二个参数则和第一个参数一样,相当于scale(2,2)transform:scale(0.5,0.5):缩小
sacle缩放最大的优势∶可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
<style>
div{
width: 230px;
height: 160px;
border: 1px solid red;
margin: 100px auto;
text-align: center;
/* overflow: hidden; */
}
img{
transition: all 6s;
}
img:hover{
transform: scale(5);
}
</style>
</head>
<body>
<div>
<img src="images/pro_07.jpg" alt="">
</div>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)