如何使用CSS3和JavaScript实现简单的书籍翻页效果？-css教程-PHP中文网

如何使用CSS3和JavaScript实现简单的书籍翻页效果？

聖光之護

发布： 2025-02-21 12:06:25

原创

363人浏览过

使用css3和javascript打造逼真的书籍翻页效果！本文提供完整代码示例，助您轻松实现这一炫酷功能。

如何使用CSS3和JavaScript实现简单的书籍翻页效果？

改进后的代码：

<code class="html"><!DOCTYPE html>
<html>
<head>
<title>书籍翻页效果</title>
<style>
body {
  perspective: 2000px; /* 添加透视效果 */
}
.book {
  transform: rotateX(30deg);
  position: relative;
  left: 40%;
  top: 30%;
  width: 500px;
  height: 500px;
  background-color: #fff;
  transform-style: preserve-3d; /* 保持3D转换 */
}
.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  border: 1px solid #1976D2;
  text-align: center;
  transform-origin: 0 50%;
  backface-visibility: hidden; /* 隐藏背面 */
  transition: transform 0.5s ease; /* 添加过渡效果 */
}
.front1 {
  background-color: paleturquoise;
}
.front2 {
  background-color: goldenrod;
}
.page img {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
</head>
<body>
<div class="book">
  <ul>
    <li class="page front1">@@##@@</li>
    <li class="page front2">@@##@@</li>
    <li class="page front2">@@##@@</li>
    <li class="page front2">@@##@@</li>
    <li class="page front2">@@##@@</li>
    <li class="page" id="Rcover">@@##@@</li> </ul>
</div>

<script>
  var book = document.querySelector(".book");
  var pages = document.querySelectorAll(".page");
  var currentPage = 0;
  var totalPages = pages.length -1;


  book.addEventListener("click", function(event) {
    if (currentPage < totalPages) {
      currentPage++;
      pages[currentPage].style.transform = "rotateY(-180deg)"; // 更平滑的翻页动画
    }
  });

  document.getElementById("Rcover").addEventListener("click", function() {
      currentPage = 0;
      pages.forEach(page => {
          page.style.transform = "rotateY(0deg)";
      });
  });
</script>
</body>
</html></code>

登录后复制

代码改进说明：