CSS3圖片翻頁是一種翻頁效果，效果類似于一本書的翻頁效果，給用戶帶來不一樣的視覺體驗(yàn)。CSS3圖片翻頁是用CSS3實(shí)現(xiàn)的，因此只要在CSS3中加入下面的代碼，即可實(shí)現(xiàn)圖片翻頁效果。

.image-wrap {
position: relative;
height: 400px;
width: 800px;
overflow: hidden;
}
.image {
position: absolute;
top: 0;
left: 0;
width: 800px;
transition: transform .6s ease;
}
.image:first-child {
z-index: 2;
}
.image:last-child {
transform: rotateY(180deg);
}
.image-wrap:hover .image:first-child {
transform: rotateY(-180deg);
z-index: 1;
}

上述代碼中，首先需要一個父級容器（image-wrap），寬度和高度可以自行調(diào)整，這里以800px和400px為例。然后每張圖片（image）需要設(shè)置絕對定位，并且left為0，這樣就能讓所有圖片在一個位置上堆疊。第一張圖片需要設(shè)置z-index為2，保證第一次訪問頁面時第一張圖片顯示。最后一張圖片需要設(shè)置transform:rotateY(180deg)，使其翻轉(zhuǎn)180度，給用戶帶來視覺感受。當(dāng)鼠標(biāo)移動到父級容器上后，就會觸發(fā)圖片翻頁效果（transform:rotateY(-180deg)），同時需要將第一張圖片z-index設(shè)置為1，保證指針在第一張圖片上。

總的來說，CSS3圖片翻頁非常簡單易操作，只要掌握好CSS3的屬性和相關(guān)知識點(diǎn)，就能輕松實(shí)現(xiàn)圖片翻頁效果，為網(wǎng)站增色不少。