CSS3鼠标悬浮图片放大效果--方法2

CSS3鼠标悬浮图片放大效果--方法2

鼠标悬停，效果如下所示：

html:

<div class="pic">
<img src="./img/mxt.jpg" alt="">
</div>

css:

*{
margin: 0;
padding: 0;
}
.pic{
width: 300px;
height: 400px;
margin: 10px auto;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,0);
/* 设置网页视距 */
perspective: 800px;
}
/* 设置图片初始宽度和高度 */
.pic img{
cursor: pointer;
width: 300px;
height: 400px;
transition: all 0.5s;
}
/* 鼠标悬停在.pic盒子上，盒子内图片发生的变形 */
.pic:hover img{
transform: scale(1.4);
}