隨著移動端的普及，單頁Web應(yīng)用的設(shè)計越來越流行。而翻頁效果可以增強(qiáng)用戶體驗，讓用戶感覺自己在閱讀一本書的一頁頁翻過去。

<div class="pages">
<div class="page" id="page1">
<h1>第一頁標(biāo)題</h1>
<p>第一頁內(nèi)容</p>
</div>
<div class="page" id="page2">
<h1>第二頁標(biāo)題</h1>
<p>第二頁內(nèi)容</p>
</div>
<div class="page" id="page3">
<h1>第三頁標(biāo)題</h1>
<p>第三頁內(nèi)容</p>
</div>
</div>

上面的代碼是一個簡單的單頁翻頁效果。首先，我們定義了一個包含多個頁面的容器，每個頁面用div元素表示，并分別定義了獨(dú)立的id。每個頁面包含標(biāo)題和內(nèi)容，分別用h1和p元素表示。

.pages {
width: 100%;
height: 100%;
overflow: hidden;
}
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform .5s ease;
}
#page1 {
z-index: 3;
}
#page2 {
transform: translateX(100%);
z-index: 2;
}
#page3 {
transform: translateX(200%);
z-index: 1;
}

接下來，我們使用CSS來完成翻頁效果。我們將頁面容器設(shè)置為全屏，并隱藏溢出的內(nèi)容。每個頁面使用絕對定位，并將其放置在容器的左上角。我們還定義了一個過渡效果，將頁面的transform屬性從一種狀態(tài)平滑地變換到另一種狀態(tài)。

在每個頁面的CSS中，我們使用了transform: translateX()來定義頁面的初始位置。通過使用不同的偏移量，在不同的z-index層上，我們可以實現(xiàn)一種2D翻頁的效果。用戶點(diǎn)擊“下一頁”按鈕時，我們將當(dāng)前頁面的transform屬性從0%變成-100%，第二個頁面的transform屬性從100%變成0%，第三個頁面的transform屬性從200%變成100%，然后再更改每個頁面的z-index值，使下一個頁面處于最前面。

通過使用HTML5和CSS3，我們可以輕松地創(chuàng)建流暢的、易用的翻頁效果來增強(qiáng)Web應(yīng)用的交互性和用戶體驗。