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

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

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

html：

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

css：

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