CSS3圖片翻頁是一個非常有趣的功能，通過一些簡單的代碼就可以實現翻頁的效果。下面我們就來看看怎么實現這個功能。

.flip-card {
background-color: transparent;
width: 400px;
height: 300px;
perspective: 1000px;
}
.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: #2980b9;
color: white;
transform: rotateY(180deg);
}

上面的代碼就是實現圖片翻頁的核心代碼。我們先看一下HTML結構：

<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="front.jpg">
</div>
<div class="flip-card-back">
<img src="back.jpg">
</div>
</div>
</div>

這里我們使用了一個包含前后兩個元素的div，將其設為翻轉卡片的主體元素。其中flip-card-front表示前半部分，flip-card-back表示后半部分。

接下來我們看一下CSS部分的代碼。在flip-card元素中我們設定了其寬高及perspective屬性，perspective可以設置視距的大小。flip-card-inner則是主體元素的內部，設定其為相對定位及transform-style屬性，這個屬性將指定children相對于parent如何轉換。而.flip-card:hover .flip-card-inner表示當鼠標懸停在元素上時，將其flip-card-inner元素進行翻轉，通過rotateY屬性來實現。flip-card-front, .flip-card-back則是前后兩部分的設定，.flip-card-back除了要進行翻轉，也要設定其背景顏色與顏色。

最后，在HTML中我們可以根據自己的需求選擇需要翻轉的圖片或其他元素。這樣，我們就可以通過簡單的代碼來實現圖片翻頁的效果了。