CSS是前端開發中必不可少的一種語言，可以實現各種炫酷的效果，比如頁面翻書效果。下面，我們來一步步教你如何用CSS實現這個效果。

首先，我們需要準備一張翻書的圖片作為背景。可以通過CSS設置它的樣式和位置，然后將頁面分為左右兩部分，左側為頁腳，右側為頁身。可以使用以下代碼：

.page{
position: relative;
width: 400px;
height: 500px;
margin: 0 auto;
background: url('page.png') top left no-repeat;
}
.page .footer{
position: absolute;
top: 450px;
left: 0;
width: 50%;
height: 50px;
background: #ccc;
}
.page .body{
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 500px;
background: #fff;
}

畫布部分設置好了，接下來就可以實現頁面翻書效果。這里需要用到CSS3的transform屬性來實現翻頁的效果。我們可以將頁身部分按照中心軸翻轉，然后根據鼠標位置的不同，計算出翻頁的角度和頁面顯示的位置。可以通過下面的代碼來實現：

.page.flip .body{
-webkit-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.page.flip .body.right{
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.page.flip .body.left{
-webkit-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.page.flip .footer{
opacity: 0;
}

最后，我們需要添加一些JavaScript代碼來實現鼠標翻頁的效果。可以通過添加以下代碼來實現：

var page = document.querySelector('.page');
var nextPage = function(){
page.classList.add('flip');
setTimeout(function(){
page.classList.remove('flip');
page.querySelector('.body').classList.remove('left');
}, 1000);
};
document.addEventListener('click',function(e){
if(e.clientX >page.offsetWidth / 2){
page.querySelector('.body').classList.add('left');
}else{
nextPage();
}
});

這樣，頁面翻書的效果就實現了。我們可以通過鼠標點擊頁面右側區域來翻頁，也可以通過JavaScript代碼來實現。