在css3的學習中，我們會經(jīng)常做一些小的動畫效果，這感覺非常有趣，所以今天的這篇文章將給大家來介紹關于css3實現(xiàn)圖片放大的一個效果，有興趣的小伙伴可以看一下。

我們都知道css3中增加了一個transform屬性應用于元素的2D或3D轉換，transform屬性允許我們對元素進行旋轉、縮放、移動或傾斜。所以對于css3實現(xiàn)圖片放大是需要用到transform屬性的，下面我們就來看看css3使用transform屬性實現(xiàn)圖片放大的效果。

第一種：css3實現(xiàn)當我們把鼠標放到圖片上圖片放大并且超出部分不隱藏的效果：

.enlarge{

width: 300px;

height: 300px;

border: 1px #ffffff solid;

}

.enlarge img{

width: 100%;

height: 100%;

cursor: pointer;

transition: all 0.6s;

-ms-transition: all 0.8s;

}

.enlarge img:hover{

transform: scale(1.2);

-ms-transform: scale(1.2);

}

css3實現(xiàn)鼠標放上圖片放大的效果前后對比如下：

第二種：css3實現(xiàn)當我們把鼠標放到圖片上圖片放大并且超出部分隱藏的效果：

.enlarge{

width: 300px;

height: 300px;

overflow: hidden;

border: 1px #ffffff solid;

}

.enlarge img{

width: 100%;

height: 100%;

cursor: pointer;

transition: all 0.6s;

-ms-transition: all 0.8s;

}

.enlarge img:hover{

transform: scale(1.3);

-ms-transform: scale(1.3);

}

css3實現(xiàn)鼠標放上圖片放大的效果前后對比如下：

說明：對于上述的兩種css3實現(xiàn)圖片放大的情況，都用到了:hover偽類，表示了鼠標懸停時候的狀態(tài)，這樣當我們把鼠標放到圖片上的時候就會讓圖片放大，當鼠標移除，圖片就會恢復原有的大小。

以上就是本篇文章的全部內(nèi)容了，關于css3中的transform屬性更詳細的用法，大家可以參考css3學習手冊進一步的了解。

總結

以上是生活随笔為你收集整理的php 鼠标点击图片放大,css3如何实现鼠标放上图片放大？（附代码）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。