在移動設備上，頁面切換是用戶體驗的重要組成部分。CSS 提供了一些實現頁面切換的方法，下面就來介紹一下。

首先，我們需要使用 CSS3 的 transform 屬性，其中的 translate3d() 方法可以通過修改頁面的 x, y, z 坐標軸的數值來實現 3D 效果。這個方法結合 transition 屬性可以實現頁面切換動畫。下面是一個代碼示例：

/* 定義頁面樣式 */
.page {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
transform: translate3d(0, 0, 0); /* 初始位置 */
transition: transform 0.3s ease-out; /* 過渡動畫效果 */
}
/* 定義 Active 頁面樣式 */
.page.active {
transform: translate3d(0, 0, 0);
}
/* 定義 Next 頁面樣式 */
.page.next {
transform: translate3d(100%, 0, 0);
}
/* 定義 Prev 頁面樣式 */
.page.prev {
transform: translate3d(-100%, 0, 0);
}

在預處理事件中，我們可以通過添加或刪除 .active, .next, .prev 屬性來控制頁面向左或向右平移。例如：

/* 實現頁面向左移動的方法 */
function slideToLeft() {
var currentPage = document.querySelector('.page.active'); // 獲取當前活躍頁面
var nextPage = currentPage.nextElementSibling || document.querySelector('.page:first-child'); // 獲取下一頁
currentPage.classList.remove('active');
nextPage.classList.remove('prev');
nextPage.classList.add('active');
currentPage.classList.add('next');
}

我們可以將 slideToLeft() 方法綁定到相應的事件中，例如點擊頁面右側的按鈕就可以實現頁面向左切換的效果了。