CSS3是網頁設計中常用的樣式表語言，其中有一個很酷的效果就是整體翻頁。下面我們來學習一下如何實現這個效果。

/*創建容器*/
.page-container {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}
/*分頁標記*/
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 1s ease-in-out;
}
/*第一頁*/
.page:nth-of-type(1) {
transform: translateY(0%);
}
/*第二頁*/
.page:nth-of-type(2) {
transform: translateY(100%);
}
/*第三頁*/
.page:nth-of-type(3) {
transform: translateY(200%);
}
/*JS實現整體翻頁*/
let currentPage = 1;
let totalPages = document.querySelectorAll('.page').length;
function goToPage(pageIndex) {
if (pageIndex >totalPages) {
return;
}
let offsetY = (pageIndex - 1) * -100;
let pageContainer = document.querySelector('.page-container');
if (pageContainer) {
pageContainer.style.transform = `translateY(${offsetY}%)`;
}
currentPage = pageIndex;
}
/*綁定事件*/
document.addEventListener('keydown', function(event) {
if (event.keyCode === 37 || event.keyCode === 38) {
goToPage(currentPage - 1);
} else if (event.keyCode === 39 || event.keyCode === 40) {
goToPage(currentPage + 1);
}
});

以上是整體翻頁的實現代碼，我們首先創建了一個page-container容器，其中包含了多個page標記。然后我們在CSS中給每個page標記分配對應頁數的偏移量，并使用transition屬性實現了平滑變化的效果。

在JS中，我們定義了goToPage函數，用于跳轉到指定頁面。同時，我們綁定了鍵盤事件，當用戶按下上下或左右箭頭時，就會觸發相應的跳轉事件。

以上就是整體翻頁的實現方法，相信您也可以輕松地在自己的網頁設計中加入這個酷炫的效果。