畫冊翻頁效果是非常常見的一個頁面效果，它可以給用戶帶來非常好的視覺體驗。在網頁設計中，實現翻頁效果可以使用很多技術，比如 JavaScript、Flash 等。但是本文要介紹的是用 CSS 實現畫冊翻頁效果。

實現翻頁效果的原理是利用 CSS 中的 transform 屬性。而其中的 transform: rotateY(-180deg) 的作用是將整個頁面沿 Y 軸翻轉 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 是畫冊的每一頁的樣式，.page.active 是當前活動頁面的樣式。其中 transition 屬性是過渡動畫的設定，這里是使 transform 從原來的狀態變化到翻轉狀態時有 0.8 秒的時間，并采用 ease 的緩動函數。然后利用 translate(-50%, -50%) 將頁面水平垂直居中定位，translate(-50%, -50%) 是一種 CSS 技巧，可以將一個塊級元素水平垂直居中，而 rotateY(-180deg) 則是翻轉 180 度的設定。

接下來，就是用 JavaScript 來實現翻頁的效果了。

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

上述的 JavaScript 代碼是將每一頁的點擊事件綁定在 .page 上，當點擊時，通過添加 .active 類名，使頁面翻轉到背面。

利用 CSS 的 transform 屬性和 JavaScript 的事件綁定，我們就可以實現一個非常流暢的畫冊翻頁效果了。