CSS3是一種非常流行的前端技術，它可以實現各種效果，其中翻頁效果是比較常見的一種。下面我們來看看如何使用CSS3實現翻頁效果。

.flip-box {
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-box-back {
transform: rotateY(180deg);
}

以上代碼就是實現翻頁效果的關鍵所在。首先我們將整個div設置一個perspective，這個屬性為3D的透視值。然后通過設置transform-style: preserve-3d來讓它的子元素都繼承這個透視值。

接著，我們給div里面的兩個子元素分別設置一個絕對定位。flip-box-front是翻頁效果的前面，flip-box-back是翻頁效果的后面。這兩個元素都設置了backface-visibility: hidden這個屬性，這里是為了防止翻轉時看到后面的元素。

最后，在hover狀態下通過transform: rotateY(180deg)來實現翻轉的效果。