圖片翻轉是網頁設計中常見的效果之一，可以使頁面更加生動有趣。要實現圖片翻轉效果，通常需要使用CSS中的transform屬性。下面介紹一種常用的實現方法。

首先，需要在HTML中添加一個容器元素，并在其中添加兩個img標簽，一個用于顯示正面，一個用于顯示背面。

<div class="flip-container">
<img class="front" src="front.jpg" alt="front">
<img class="back" src="back.jpg" alt="back">
</div>

接著，在CSS中設置容器元素和兩個img標簽的樣式。其中，將容器元素設置為相對定位，以方便后續的絕對定位。正面和背面的img標簽都要絕對定位，并把背面的img標簽放到容器元素的背面，并旋轉180度。

.flip-container {
position: relative;
width: 200px;
height: 200px;
perspective: 1000px;
}
.front, .back {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
.back {
transform: rotateY(180deg);
}

接下來，需要添加一個觸發翻轉效果的事件。一種常用的方式是在容器元素中添加一個鼠標事件，當鼠標移入容器元素時觸發翻轉效果。具體實現如下：

.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(-180deg);
}

以上就是一個簡單的基于CSS的圖片翻轉實現方法。