CSS橫向切換頁面是一種非常常見的網頁交互方式，它可以讓頁面切換更加流暢，增強用戶體驗。具體來說，就是通過CSS的transform屬性和transition屬性，動態改變網頁中某個元素的位置，來實現頁面的平滑切換。下面，我們來看一下具體的操作。

/*HTML結構*/
<div class="container">
<div class="page page1"></div>
<div class="page page2"></div>
<div class="page page3"></div>
</div>
/*CSS樣式*/
.container {
position: relative;
height: 100vh;
overflow-x: hidden;
}
.page {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.page1 {
background-color: red;
}
.page2 {
background-color: green;
transform: translateX(100%);
}
.page3 {
background-color: blue;
transform: translateX(200%);
}
/*JS代碼*/
var pageCur = 0;
var pageNext = 1;
var pages = document.querySelectorAll('.page');
document.addEventListener("wheel", pageChange);
function pageChange(event) {
if (event.deltaY < 0) {
pageNext = Math.max(0, pageCur - 1);
} else {
pageNext = Math.min(pages.length - 1, pageCur + 1);
}
pages[pageCur].addEventListener('transitionend', function () {
pageCur = pageNext;
pages[pageCur].style.transition = 'transform .5s';
pages[pageCur].style.transform = 'translateX(0)';
pages[pageCur].removeEventListener('transitionend', arguments.callee);
});
pages[pageCur].style.transition = 'transform .5s';
pages[pageCur].style.transform = 'translateX(-100%)';
pages[pageNext].style.transform = 'translateX(0)';
}

以上代碼實現了一個簡單的橫向頁面切換效果，通過滾輪事件來控制當前頁面和目標頁面，然后通過CSS的transform屬性來改變頁面位置，達到切換的效果。需要注意的是，在切換頁面時，要設置頁面的transition屬性，否則會導致頁面切換不流暢。此外，為了實現平滑的頁面切換效果，我們還可以根據需要自己調整頁面切換的速度和緩動效果。