實作方法：1、使用「:active」選擇器選取滑鼠點擊圖片的狀態；2、使用transform屬性和scale()函數實作圖片放大效果，語法「img:active {transform: scale( x軸放大倍率,y軸放大倍率);}」。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css3實作滑鼠點擊圖片放大
#實作想法：
使用“:active”選擇器選取滑鼠點擊圖片的狀態
使用transform屬性和scale()函數實作放大效果
語法：
img:active {transform: scale(2,2);}實作範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
img:active {
margin: 100px;
transform: scale(2, 2);
}
</style>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="css3如何實現滑鼠點擊圖片放大" >
</body>
</html>
說明：
active的英文解釋為“正面的”，表現在滑鼠上就是點擊的意思。關於active選擇器最多的範例恐怕就是應用在連結上面的，然而打開連結是一個一瞬間的動作，這不能很好的體現active選擇器的特點。
Transform屬性套用於元素的2D或3D轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等。當該屬性和scale()函數一起使用是時，該屬性元素縮放效果。
以上是css3如何實現滑鼠點擊圖片放大的詳細內容。更多資訊請關注PHP中文網其他相關文章！
