CSS3的出現吸引了越來越多前端開發人員的關注，css3中的transform屬性為網頁的設計注入了新的活力。其中，圖片反轉是transform中的一種效果，本文將介紹如何使用CSS3來實現圖片反轉。

img:hover {
	transform: rotateY(180deg);
}

上述代碼實現了鼠標懸停時圖片反轉180度的效果。其中transform屬性指定了旋轉的方式及旋轉的角度，rotateY表示縱向旋轉。在代碼中還需要指定:hover，這意味著僅在鼠標懸停時應用該效果。

當然，圖片反轉不僅限于鼠標懸停。我們也可以使用其他的方式來觸發圖片反轉，比如點擊事件等。

img.clicked {
	transform: rotateY(180deg);
}
img.clicked {
	cursor: pointer;
}

上述代碼可以讓用戶點擊圖片時實現反轉。與上一個例子相同，transform屬性指定了旋轉的方式及角度，同時通過添加.clicked類來使其在用戶點擊圖片時應用該效果。另外，添加cursor屬性可以更改鼠標光標類型，這里我們將其設置為pointer，表示光標會變成小手。

總之，CSS3提供了許多令人興奮的效果，其中包括圖片反轉。通過如上代碼的實現，我們可以讓我們的網頁設計更加動感。