CSS中的圖片翻轉效果可以對網頁的視覺效果產生很大的影響。下面我們來看看如何實現這個效果。

.flip {
perspective: 1000px; /* 設定透視度 */
}
.flip img {
width: 100%;
height: 100%;
position: absolute;
transition: transform .5s ease; /* 設置過渡效果 */
}
.flip:hover img {
transform: rotateY(180deg); /* 設置旋轉角度 */
}

代碼解釋：

首先，我們創建一個類名為“flip”的CSS規則，用于設定透視度。這個透視度是3D效果中必不可少的，我們可以通過perspective屬性來設定，例如perspective:1000px;

然后我們為這個類中的圖片設定樣式，width：100%和 height：100%可以讓圖片在容器中鋪滿。position：absolute可以讓圖片脫離文檔流，為之后我們對圖片的旋轉做好準備。transition：transform .5s ease可以設定過渡效果，使得圖片的旋轉動作更加順暢。

最后，當鼠標懸停在圖片上時，我們通過:hover選擇器為圖片設定旋轉角度，其中transform: rotateY(180deg);可以使圖片繞Y軸旋轉180度，從而表現出翻轉的效果。

總結：

以上就是CSS中圖片翻轉效果的實現方法，通過設定透視度和旋轉角度來實現3D效果。CSS中還有很多其他的屬性可以用來實現更多炫酷的效果，希望讀者們可以多加嘗試。