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

.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);
}

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

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

最后，在hover狀態(tài)下通過transform: rotateY(180deg)來實現(xiàn)翻轉(zhuǎn)的效果。