CSS 圖片翻邊效果在網頁設計中經常使用，它可以讓圖片看起來更加生動、立體。而實現這個效果的方法其實也很簡單，下面我們就來介紹一下。

.flip-card {
background-color: transparent; 
perspective: 1000px; /* 設置翻轉的視距 */ 
transform-style: preserve-3d; /* 保留 3D 空間 */ 
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
/* 翻轉效果，鼠標放到圖片上時觸發 */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* 圖片的正面和背面布局 */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
/* 圖片的正面 */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* 圖片的背面 */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}

代碼中，首先我們需要創建一個外層容器，使用 perspective 屬性來設置翻轉的視距。之后，我們創建一個內部容器用來裝載圖片，使用 transform-style 屬性設置保留 3D 空間。接著，我們使用 hover 事件來觸發圖片的翻轉效果，讓內部容器實現 rotateY 旋轉。

最后，我們使用兩個 absolute 定位的容器分別布局圖片的正面和背面，使用 backface-visibility 屬性設置正面不可見。然后，在正面和背面容器上添加不同的樣式，就完成了整個效果的實現。