在css3的学习中,我们会经常做一些小的动画效果,这感觉非常有趣,所以今天的这篇文章将给大家来介绍关于css3实现图片放大的一个效果,有兴趣的小伙伴可以看一下。
我们都知道css3中增加了一个transform属性应用于元素的2D或3D转换,transform属性允许我们对元素进行旋转、缩放、移动或倾斜。所以对于css3实现图片放大是需要用到transform属性的,下面我们就来看看css3使用transform属性实现图片放大的效果。
第一种:css3实现当我们把鼠标放到图片上图片放大并且超出部分不隐藏的效果:
@@##@@
css3实现鼠标放上图片放大的效果前后对比如下:

第二种:css3实现当我们把鼠标放到图片上图片放大并且超出部分隐藏的效果:
立即学习“前端免费学习笔记(深入)”;
@@##@@
css3实现鼠标放上图片放大的效果前后对比如下:
说明:对于上述的两种css3实现图片放大的情况,都用到了:hover伪类,表示了鼠标悬停时候的状态,这样当我们把鼠标放到图片上的时候就会让图片放大,当鼠标移除,图片就会恢复原有的大小。
以上就是本篇文章的全部内容了,关于css3中的transform属性更详细的用法,大家可以参考css3学习手册进一步的了解。











