CSS3中有一個(gè)很酷的特性，可以使圖片在鼠標(biāo)移到上面時(shí)變大。這個(gè)特性可以通過使用transform屬性和transition屬性來實(shí)現(xiàn)。

.img {
width: 200px;
height: 200px;
transition: all .5s ease;
}
.img:hover {
transform: scale(1.2);
}

在上面的代碼中，我們使用了一個(gè)類名為.img的選擇器來選中圖片元素。首先，我們給圖片一個(gè)寬度和高度，并使用transition屬性定義了一個(gè)過渡效果。這個(gè)過渡效果可以讓圖片在鼠標(biāo)移到上面時(shí)變化變得更加平滑。接下來，我們使用:hover偽類來定義當(dāng)鼠標(biāo)移到上面時(shí)，圖片應(yīng)該如何變化。在這里，我們使用了transform屬性來使圖片放大為原來的1.2倍。我們將所有的屬性都設(shè)置為all，這樣在鼠標(biāo)移開時(shí)，圖片會(huì)逐漸縮小回到原來的大小。

除了使用transform的縮放功能外，你還可以使用translate屬性移動(dòng)圖片，rotate屬性旋轉(zhuǎn)圖片，甚至可以使用多個(gè)屬性一起使用來創(chuàng)造更復(fù)雜的效果。

總結(jié)一下，CSS3的transform和transition屬性使得我們可以很容易地實(shí)現(xiàn)讓圖片變大并且擁有更好的過渡效果。這個(gè)特性可以為你的網(wǎng)站增添更多的動(dòng)感和生氣。在你的下一個(gè)網(wǎng)頁設(shè)計(jì)中，為什么不嘗試使用這個(gè)功能呢？