CSS特效之圖片翻轉

.flip {
-webkit-perspective: 600px; /*設置透視*/
perspective: 600px;
}
.flip:hover img {
-webkit-transform: rotateY(180deg); /*圖片翻轉180度*/
transform: rotateY(180deg);
}

在這里，我們使用了CSS3的3D變換功能，在鼠標滑過時，將圖片沿著Y軸旋轉180度，實現了圖片的翻轉效果。

此外，我們還使用了CSS3的透視屬性，通過透視視角的設置，讓旋轉效果更加真實。

如想要實現其他方向的翻轉，只需改變對應的旋轉度數，例如沿著X軸翻轉，則將rotateY改為rotateX即可。

需要注意的是，這種效果在一些老版本的瀏覽器上可能不支持，建議在實際應用中進行兼容性測試。