transform: scale(2)
scale等比例放大
大于1是放大
小于1是缩小
负值是倒着放大
scaleX scaleY 可以单独设置只在x轴y轴放大
改变中心点放大的位置
左上 left top
左下 left bottom
左中 left center
右上 right top
右下 right bottom
右中 right center
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;/* height: 300px; */border: 5px solid red;margin: 100px auto;overflow: hidden;}img{width: 100%;transition: all 2s;transform-origin: right top;/* 改变中心点放大的位置left top left bottomleft centerright top right bottomright center*/}div:hover img{transform: scale(2);/*scale等比例放大大于1是放大小于1是缩小 负值是倒着放大 scaleX scaleY可以单独设置只在x轴y轴放大*/}</style>
</head>
<body><div><img src="/image/dog.jpg" alt=""></div>
</body>
</html> 鼠标放上去就可以缩小放大了