HTML5是一種結構化標記語言，其特點是便于訪問、靈活易用。其中一個重要的功能是支持書本翻頁。我們可以通過簡單的HTML和CSS代碼來實現這個效果。

//HTML代碼
這是第一頁內容
這是第二頁內容
這是第三頁內容
//CSS代碼
.book {
width: 600px;
height: 400px;
border: 1px solid #ccc;
overflow: hidden;
}
.page {
width: 600px;
height: 400px;
float: left;
display: none;
position: relative;
}
.page:first-child {
display: block;
}
.page:before {
content: "";
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 30%;
height: 100%;
transform: skew(-20deg);
transform-origin: top left;
z-index: 1;
box-shadow: 0 0 5px rgba(0,0,0,.2);
}
.page:after {
content: "";
position: absolute;
top: 0;
right: 0;
background: #fff;
width: 30%;
height: 100%;
transform: skew(20deg);
transform-origin: top right;
z-index: 1;
box-shadow: 0 0 5px rgba(0,0,0,.2);
}
.page p {
position: relative;
z-index: 2;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.prev {
left: 20px;
}
.next {
right: 20px;
}

上述代碼中，我們定義了一個類名為“book”的容器，并設置其寬度、高度、邊框和溢出屬性。在書本中，每一頁都是一個類名為“page”的容器，其中包含一個段落元素。我們給第一個“page”容器設置了“display: block”，表示第一頁默認顯示，其它頁設置了“display: none”，表示隱藏。

我們給“page”容器添加了: before和: after偽元素，用于模擬的效果頁面的兩個封面。我們使用transform: skew屬性使元素傾斜，并使用box-shadow屬性為其添加陰影。段落元素被設置了z-index: 2屬性，使其在偽元素下方顯示。

我們還定義了類名為“prev”和“next”的元素，以顯示在書本上，用于翻頁。這兩個元素使用了定位屬性，分別設置了左右偏移量，并使用transform: translateY屬性使其在頁面垂直居中。當單擊這兩個元素時，我們可以使用JavaScript代碼操作“page”容器的顯示和隱藏屬性，從而實現翻頁效果。