CSS3中的頁面滑動特效給網(wǎng)頁添加了更多的交互性和美感，下面我們來探討一下CSS3中的頁面滑動。

/*這是我們所需的CSS樣式*/
body{
height: 100%;
overflow: hidden;
}
.slider{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
transition: all 0.5s ease-out;
}
.section{
flex-shrink: 0;
height: 100%;
width: 100%;
}
/*下面是我們的HTML代碼*/

上述代碼中，我們用一個(gè)slider包裹了三個(gè)section，每個(gè)section代表一個(gè)頁面。我們的目標(biāo)是讓這三個(gè)section隨著鼠標(biāo)的滾動而進(jìn)行切換。我們可以使用JavaScript來實(shí)現(xiàn)，但也可以使用CSS3。

/*接下來的CSS代碼實(shí)現(xiàn)了鼠標(biāo)的滾動效果*/
.slider{
transform: translate3d(0,0,0);
}
.slider.active{
transform: translate3d(0,-100%,0);
}
.slider.active .section2{
transform: translate3d(0,-50%,0) scale(0.8);
z-index: 1;
}
.slider.active .section1{
transform: translate3d(0,-100%,0);
}
.slider.active .section3{
transform: translate3d(0,-50%,0) scale(0.8);
z-index: 1;
}

在上述代碼中，我們使用了transform屬性，translate3d表示將元素在三個(gè)坐標(biāo)軸上進(jìn)行平移，第一個(gè)參數(shù)表示x軸的平移距離，第二個(gè)參數(shù)表示y軸的平移距離，第三個(gè)參數(shù)表示z軸的平移距離。

我們將slider向上平移了100%以切換到下一頁，同時(shí)通過設(shè)置z-index和scale屬性，使得當(dāng)前頁在上層，下一頁在下層，并縮小頁面以顯示出下一張頁面。

通過簡單的CSS代碼實(shí)現(xiàn)頁面滑動，不僅代碼簡單易懂，而且效果還非常出色。通過自己嘗試，你也可以快速上手實(shí)現(xiàn)一些有趣的頁面切換動畫。