CSS3提供了多種圖片翻轉切換效果，可以讓網頁看起來更加生動有趣。以下是兩種常用的圖片翻轉效果實現方法。

/* 方法一：利用transform屬性實現圖片翻轉 */
.flip {
width: 200px;
height: 200px;
position: relative;
}
.flip img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.flip:hover img:first-child {
transform: rotateY(180deg);
}
.flip:hover img:last-child {
transform: rotateY(0deg);
}

上述代碼中，首先定義了一個.flip類，作為圖片容器的外層盒子。然后給這個盒子下面的兩個img元素設置絕對定位，讓它們疊在一起。通過:hover偽類實現鼠標懸浮時給前面的圖片加上翻轉效果，后面的圖片不變。

/* 方法二：利用transition屬性實現圖片翻轉 */
.flip2 {
width: 200px;
height: 200px;
position: relative;
perspective: 1000px; /* 需要給外層盒子設定透視距離 */
}
.flip2 img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
transition: all 0.5s ease-in-out;
}
.flip2 img:last-child {
transform: rotateY(180deg);
}
.flip2:hover img:first-child {
transform: rotateY(-180deg);
}
.flip2:hover img:last-child {
transform: rotateY(0deg);
}

方法二比較復雜，需要給外層盒子設定透視距離，使得圖片的翻轉效果更加生動。同樣也是利用:hover偽類實現鼠標懸浮時給前面的圖片加上翻轉效果，后面的圖片不變。