在创建HTML电子书时，翻页效果是一个非常重要的设计元素。 在本文中，我们将介绍如何使用代码实现HTML电子书中的翻页效果。
<html>
<head>
<title>电子书</title>
<style>
.page {
width: 100%;
height: 100%;
display:flex;
justify-content:center;
align-items:center;
font-size:24px;
}
.book {
width: 70%;
height: 80%;
overflow:hidden;
position:relative;
box-shadow: 1px 1px 20px rgba(0,0,0,0.3);
}
.page-turn {
width: 100%;
height: 100%;
position:absolute;
top:0;
left: 50%;
transform:translate(-50%,0);
transition: all 0.5s ease-in-out;
}
.page.turn-over {
transform:translate(-50%,0) rotateY(-180deg);
}
.page.turn-over:before {
content:"";
width:100%;
height:100%;
position: absolute;
top:0;
left: 0;
background-color: rgba(0,0,0,0.2);
transition: all 0.5s ease-in-out;
backface-visibility:hidden;
}
.page.turn-over:before {
transform: rotateY(-180deg);
}
.page.turn-over:after {
display: none;
}
.page-number {
position:absolute;
font-size:20px;
color:white;
bottom:10px;
right:10px;
}
</style>
</head>
<body>
<div class="page">
<div class="book">
<div class="page-turn">
<p>电子书第一页内容</p>
<p class="page-number">1</p>
</div>
<div class="page-turn">
<p>电子书第二页内容</p>
<p class="page-number">2</p>
</div>
<div class="page-turn">
<p>电子书第三页内容</p>
<p class="page-number">3</p>
</div>
</div>
</div>
</body>
</html>上述代码使用CSS3 3D变换和过渡效果来实现电子书的翻页效果。 页面被分成若干个div元素，每个div元素代表一页的内容。 过渡效果在页面之间应用，使用户可以通过点击或拖动页面来翻转电子书的页面。
总之，在创建HTML电子书时，翻页效果具有重要作用。 使用CSS3 3D变换和过渡效果，我们可以实现有吸引力的电子书翻页效果。 此代码是一个示例，您可以根据自己的需求进行适当的更改。