CSS是前端開發中不可或缺的重要技術之一，它可以用來定義網頁布局、樣式和特效。其中，點擊圖片翻轉是一種常見的特效，下面我們來一起學習如何使用CSS實現這一效果。

首先，我們要在HTML中添加一張需要翻轉的圖片，并為其添加一個ID。代碼如下：

<img src="image.jpg" id="flip-image">

接下來，在CSS中定義圖片的樣式并添加翻轉效果。代碼如下：

#flip-image {
width: 200px;
height: 200px;
background-color: #ccc;
transition: transform 0.5s;
}
#flip-image:hover {
transform: rotateY(180deg);
}

解釋一下，我們首先為圖片定義了寬度、高度和背景顏色。其中，transition屬性用于定義過渡效果，這里我們定義了transform屬性的過渡時間為0.5秒。然后，在:hover偽類中，我們添加了transform:rotateY(180deg)屬性，用于定義鼠標懸浮時的翻轉效果。

這樣，當鼠標懸浮在圖片上時，就能看到圖片翻轉的效果了。可以在瀏覽器中嘗試一下，感受一下翻轉的效果吧！

除了使用:hover偽類，我們還可以使用JavaScript代碼實現點擊圖片翻轉的效果。代碼如下：

var image = document.getElementById("flip-image");
image.addEventListener("click", function() {
image.classList.toggle("flip");
});

以上代碼中，我們首先獲取了DOM中的圖片元素，然后為其綁定了一個點擊事件。當點擊圖片時，我們通過classList.toggle()方法為圖片的class屬性添加/移除了一個名為"flip"的樣式。在CSS中，我們為.flip樣式添加了transform:rotateY(180deg)屬性，同樣來實現翻轉效果。

至此，我們已經學會了如何使用CSS實現圖片翻轉特效。無論是:hover偽類還是JavaScript代碼，只需簡單幾步就能實現這一效果。快來試試吧！