css3怎么实现鼠标放上图片放大效果-创新互联

小编给大家分享一下css3怎么实现鼠标放上图片放大效果，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

创新互联公司是一家专业从事网站建设、网络营销、微信小程序定制开发、网站运营为一体的建站企业；在网站建设告别千篇一律，告别似曾相识，这一次我们重新定义网站建设，让您的网站别具一格。响应式网站建设，实现全网营销！一站适应多终端，一样的建站，不一样的体验！

我们都知道css3中增加了一个transform属性应用于元素的2D或3D转换，transform属性允许我们对元素进行旋转、缩放、移动或倾斜。所以对于css3实现图片放大是需要用到transform属性的，下面我们就来看看css3使用transform属性实现图片放大的效果。

第一种：css3实现当我们把鼠标放到图片上图片放大并且超出部分不隐藏的效果：

css3实现鼠标放上图片放大的效果前后对比如下：

                 

第二种：css3实现当我们把鼠标放到图片上图片放大并且超出部分隐藏的效果：

css3实现鼠标放上图片放大的效果前后对比如下：

                   

说明：对于上述的两种css3实现图片放大的情况，都用到了:hover伪类，表示了鼠标悬停时候的状态，这样当我们把鼠标放到图片上的时候就会让图片放大，当鼠标移除，图片就会恢复原有的大小。

看完了这篇文章，相信你对css3怎么实现鼠标放上图片放大效果有了一定的了解，想了解更多相关知识，欢迎关注创新互联网站制作公司行业资讯频道，感谢各位的阅读！

本文题目：css3怎么实现鼠标放上图片放大效果-创新互联
网站网址：http://scjbc.cn/article/dgphcs.html