當我們需要讓一張圖片實現翻轉效果，最簡單的方法就是使用 CSS3 的 transform 屬性。其中，rotateX 代表繞 X 軸旋轉，rotateY 則代表繞 Y 軸旋轉。

為了讓圖片從中間翻轉，我們需要先將圖片放置在一個標準的 div 容器中，然后再設置該容器的寬、高、透視和相對位置等屬性。接下來就可以使用 CSS3 的 transform 屬性，將圖片在 X 或 Y 軸上進行旋轉。

.flip-container {
width: 200px;
height: 200px;
perspective: 600px;
position: relative;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flipper {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.5s ease-in-out;
}
.front,
.back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}

上述代碼中，flip-container 是圖片容器，flipper 代表翻轉的內容，其中包含了 front 和 back 兩個面。當鼠標懸浮在 flip-container 上時，.flip-container:hover .flipper 會觸發 flipper 翻轉。為了讓翻轉更加平滑，代碼中還設置了 transition 屬性。

最后，為了確保翻轉效果準確，需要為圖片設置 backface-visibility: hidden，這可以防止圖片在翻轉時出現閃爍和變形。

總而言之，在使用 CSS 實現圖片翻轉時，我們可以使用 transform 和 perspective 屬性，根據具體需求進行靈活調整，以實現不同的翻轉效果。