之前的写法有很大问题，其实我们用C3的transform:scale(放大倍数)来写的话就是一行代码就可以实现的，zoom也是可以实现放大显示的，不过它两个的中心位置是不同的。所以来做个笔记，加深一下记忆。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
.box {
width: 200px;
height: 200px;
overflow: hidden;
border: 1px solid;
margin: 100px;
}
img {
display: inline-block;
width: 200px;
height: 200px;
}
img:hover {
/*从左上角开始放大*/
/*zoom:1.5;*/
/*从中心开始放大*/
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box">
<img src="./img/man.png" alt="">
</div>
</body>
</html>
假如两个都设置的话，放大效果是会叠加的，但是放大的中心点依然为图片中心。
网友评论