畫冊(cè)翻頁(yè)效果是非常常見(jiàn)的一個(gè)頁(yè)面效果，它可以給用戶帶來(lái)非常好的視覺(jué)體驗(yàn)。在網(wǎng)頁(yè)設(shè)計(jì)中，實(shí)現(xiàn)翻頁(yè)效果可以使用很多技術(shù)，比如 JavaScript、Flash 等。但是本文要介紹的是用 CSS 實(shí)現(xiàn)畫冊(cè)翻頁(yè)效果。

實(shí)現(xiàn)翻頁(yè)效果的原理是利用 CSS 中的 transform 屬性。而其中的 transform: rotateY(-180deg) 的作用是將整個(gè)頁(yè)面沿 Y 軸翻轉(zhuǎn) 180 度。

.page {
width: 400px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: transform 0.8s ease;
}
.page.active {
transform: translate(-50%, -50%) rotateY(-180deg);
}

上述代碼中 .page 是畫冊(cè)的每一頁(yè)的樣式，.page.active 是當(dāng)前活動(dòng)頁(yè)面的樣式。其中 transition 屬性是過(guò)渡動(dòng)畫的設(shè)定，這里是使 transform 從原來(lái)的狀態(tài)變化到翻轉(zhuǎn)狀態(tài)時(shí)有 0.8 秒的時(shí)間，并采用 ease 的緩動(dòng)函數(shù)。然后利用 translate(-50%, -50%) 將頁(yè)面水平垂直居中定位，translate(-50%, -50%) 是一種 CSS 技巧，可以將一個(gè)塊級(jí)元素水平垂直居中，而 rotateY(-180deg) 則是翻轉(zhuǎn) 180 度的設(shè)定。

接下來(lái)，就是用 JavaScript 來(lái)實(shí)現(xiàn)翻頁(yè)的效果了。

var pages = document.querySelectorAll('.page');
for (var i = 0; i < pages.length; i++) {
pages[i].addEventListener('click', function () {
this.classList.add('active');
});
}

上述的 JavaScript 代碼是將每一頁(yè)的點(diǎn)擊事件綁定在 .page 上，當(dāng)點(diǎn)擊時(shí)，通過(guò)添加 .active 類名，使頁(yè)面翻轉(zhuǎn)到背面。

利用 CSS 的 transform 屬性和 JavaScript 的事件綁定，我們就可以實(shí)現(xiàn)一個(gè)非常流暢的畫冊(cè)翻頁(yè)效果了。