CSS3技術(shù)可以實(shí)現(xiàn)許多動(dòng)態(tài)效果，比如書(shū)籍翻頁(yè)效果就是其中之一。這種效果可以讓網(wǎng)站的界面更加生動(dòng)有趣，也更貼近實(shí)際感覺(jué)，提高用戶(hù)體驗(yàn)。下面我們就來(lái)看一下如何用CSS3實(shí)現(xiàn)書(shū)籍翻頁(yè)效果。

.page-turn{
width: 400px;
height: 600px;
perspective: 1000px;
}
.page{
width: 50%;
height: 100%;
position: absolute;
top: 0;
overflow: hidden;
transition: transform 1s ease;
transform-style: preserve-3d;
}
.page-1{
background-color: #f2f2f2;
left: 0;
}
.page-2{
background-color: #e6e6e6;
right: 0;
transform: rotateY(-180deg);
}
.page-open{
transform: rotateY(-180deg);
}

上面代碼中，我們定義了一個(gè).parent元素和兩個(gè).page元素，一個(gè)代表左側(cè)頁(yè)面，一個(gè)代表右側(cè)頁(yè)面。其中.parent元素的perspective屬性是用來(lái)實(shí)現(xiàn)3D效果的，不加這個(gè)屬性，我們是看不到3D效果的。在.page元素中，我們使用了transition屬性來(lái)實(shí)現(xiàn)翻頁(yè)動(dòng)態(tài)效果，同時(shí)使用了transform-style屬性來(lái)告訴瀏覽器，這個(gè)元素內(nèi)部的子元素使用3D效果進(jìn)行渲染。另外，我們使用了transform: rotateY(-180deg)來(lái)旋轉(zhuǎn)右側(cè)的頁(yè)面元素，達(dá)到翻頁(yè)的目的。

在實(shí)現(xiàn)過(guò)程中，可以通過(guò)JavaScript來(lái)監(jiān)聽(tīng)用戶(hù)的鼠標(biāo)事件，比如鼠標(biāo)單擊事件，鼠標(biāo)滾輪事件等等。當(dāng)用戶(hù)觸發(fā)這些事件后，我們就可以動(dòng)態(tài)地給.page元素添加和移除.page-open類(lèi)來(lái)實(shí)現(xiàn)頁(yè)面翻轉(zhuǎn)的效果。這樣，我們就成功地實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的書(shū)籍翻頁(yè)效果。