CSS是前端開發中重要的技術之一，它能夠美化我們的頁面并增加用戶體驗。今天我們來介紹一下如何使用CSS創建圖片翻頁動效。

.image-container {
position: relative;
width: 300px;
height: 200px;
margin: 0 auto;
perspective: 1000px;
}
.image-container img {
position: absolute;
width: 100%;
height: 100%;
transition: transform 0.8s;
backface-visibility: hidden;
}
.image-container:hover img {
transform: rotateY(180deg);
}
.image-container img:last-child {
transform: rotateY(180deg);
}

首先，我們需要在HTML中創建一個容器來承載圖片，這個容器要設置透視距離（perspective），然后在容器中添加圖片。圖片需要設置絕對定位（position:absolute）并且寬高為100%，這是為了使圖片覆蓋整個容器。

然后我們給圖片添加一個過渡效果（transition），這樣圖片在被翻轉的時候會有一個緩慢的過渡效果。我們還需要把后面的圖片隱藏起來，這可以通過設置backface-visibility為hidden來實現。

接下來是關鍵代碼。當鼠標移動到容器上，我們將圖片旋轉180度（rotateY），實現翻頁的效果。我們還需要通過CSS選擇器使用:last-child來選擇最后一個圖片，因為它的初始狀態是已經翻轉過的，所以我們不能讓它再次翻轉。

通過CSS創建圖片翻頁動效非常簡單，只需要幾行代碼，你就能給你的網站增加美麗的效果。