[分享]css与js做出翻书效果

CSS与JS都是网页开发中非常重要的技术，今天我们将会学习如何使用这些技术来做出翻书效果。首先，我们需要用CSS来设置我们的书页，如下代码所示：.book { : relative; width: 4...

CSS与JS都是网页开发中非常重要的技术，今天我们将会学习如何使用这些技术来做出翻书效果。

首先，我们需要用CSS来设置我们的书页，如下代码所示：

.book {
  position: relative;
  width: 400px;
  height: 200px;
}

.page {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transform-origin: left;
  backface-visibility: hidden;
  transition: transform 0.6s;
}

.page.right {
  left: 50%;
  transform: rotateY(-180deg) translateZ(0);
}

.page.left {
  left: 0;
  transform: rotateY(0deg) translateZ(0);
} 

在上面的代码中，我们用了一个.book类来包含我们的书页，并且使用了.position属性来使得每一页的位置变得相对于.book类而言。然后，我们定义了一个.page类，它将会是我们的每一页。.page类使用了position的属性，与left和right属性，使得它可以在完整的.book类中呈现。此外，我们还使用了transform，box-shadow和transition属性，它们将会使得我们创建出更加真实和生动的翻书效果。

接下来，我们需要使用JS来实现我们的翻书效果。请看以下代码：

const book = document.querySelector(".book");
const pages = document.querySelectorAll(".page");

let currentPage = 1;

book.addEventListener("click", () => {
  if (currentPage < pages.length) {
    pages[currentPage - 1].classList.add("right");
    currentPage++;
    pages[currentPage - 1].classList.add("left");
  }
}); 

在上面的代码中，我们首先选择了我们的.book类和我们的.page类。然后，我们定义了一个.currentPage变量，它将会保存当前页面的页码。接着，我们使用了addEventListener函数，它会在我们点击书页时调用。在这个函数中，我们检查当前页码是否小于总页数，如果是，我们就将当前页面向右移动，同时将变量currentPage加1，将下一页向左移动。

到这里，我们终于成功地使用CSS和JS来做出了一个翻书效果。希望这个简短的教程能够帮助你更好地理解CSS和JS的使用方法。