HTML5提供了各種各樣的交互特效，包括翻書(shū)效果。下面是一個(gè)簡(jiǎn)單但有效的左右滑動(dòng)翻書(shū)效果的代碼。

<div class="book">
<div class="page">
<p>第一頁(yè)內(nèi)容</p>
</div>
<div class="page">
<p>第二頁(yè)內(nèi)容</p>
</div>
</div>
<style>
.book {
position: relative;
width: 300px;
height: 200px;
margin: 50px auto;
perspective: 1000px;
}
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: #fff;
background-color: #2c3e50;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: transform 0.5s ease;
transform-origin: left center;
}
.page:nth-child(2) {
transform: rotateY(-180deg);
transform-origin: right center;
}
.book:hover .page:nth-child(1) {
transform: rotateY(180deg);
}
.book:hover .page:nth-child(2) {
transform: rotateY(0deg);
}
</style>

以上代碼包括一個(gè)外層div和兩個(gè)內(nèi)層div，每個(gè)內(nèi)層div代表一頁(yè)的內(nèi)容。通過(guò)CSS的transform屬性和:hover偽類，我們實(shí)現(xiàn)了左右滑動(dòng)翻書(shū)的效果。值得注意的是，我們使用了CSS3的3D轉(zhuǎn)換，需要在外層div中使用perspective屬性。