<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
</title>
<style>
html{
/*设置景深*/
perspective: 800px;
}
.box1:hover{
/*对元素进行缩放的函数
scaleX() 水平方向上的缩放
scaleY() 垂直方向上的缩放
scale() 双方向的缩放**/
/* transform:scale(2);*/
}
.img-wrapper{
width: 200px;
height: 200px;
border:1px solid red;
/*如果不写overflow:hidden,图片放大之后,父元素也会放大
写上之后,父元素不会放大放大之后把多余的部分裁掉*/
overflow: hidden;
transform-origin:100px 100px;
}
img{
/*过渡时长为0.2s*/
transition:.2s;
}
.img-wrapper:hover img{
/*对图片进行一个放大*/
transform:scale(1.2);
}
</style>
</head>
<body>
<div class="img-wrapper">
<img src="./img/1.jpg" width="100%" height="100%" >
</div>
</body>
</html>
07-22
993
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
03-30
145
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)