[分享]css3图片某个区域放大至满屏

CSS3的transform属性可以用来变换元素的尺寸、旋转角度等等，其中一个值得一提的功能就是图片区域的放大效果。想象一下，您在浏览网站的时候看到了一张特别的图片，想要仔细观察一下图片中的细节，如果...

CSS3的transform属性可以用来变换元素的尺寸、旋转角度等等，其中一个值得一提的功能就是图片区域的放大效果。

想象一下，您在浏览网站的时候看到了一张特别的图片，想要仔细观察一下图片中的细节，如果只是通过缩放网页的方式并不能让图片中的细节更加清晰。此时，您就可以通过CSS3的transform属性为图片设置一个放大的效果，让图片放大到满屏来观看细节。

.img-zoom {
  width: 200px;
  height: 200px;
  background-image: url('example.jpg');
  background-size: cover;
  background-position: center;
  transition: transform .3s ease-in-out;
}

.img-zoom:hover {
  transform: scale(3);
} 

上面的代码中，我们为一个class为“img-zoom”的元素设置了一张图片作为背景，然后设置了图片的尺寸和位置，最后设置了一个transform的过渡动画。

当我们在HTML中使用这个类名的时候，将鼠标悬停在图片上，就能够实现图片的放大效果。其中，hover伪类为悬停状态下的样式，而transform:scale(3)表示将图片放大3倍。

这样，当我们把鼠标移动到图片上时，图片就能够放到满屏，让我们更加清晰地看到图片中的细节了。