transform3d翻页效果

transform3d 可以用来实现翻页效果，具体实现方法如下：

1. 定义 HTML 结构

<div class="book">
  <div class="page page1"></div>
  <div class="page page2"></div>
  <div class="page page3"></div>
  <div class="page page4"></div>
</div>

2. 添加 CSS 样式

.book {
  position: relative;
  width: 500px;
  height: 300px;
  perspective: 1000px;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transform-origin: left center;
  transition: transform 0.5s;
}

.page1 {
  z-index: 1;
  transform: rotateY(0deg);
}

.page2 {
  z-index: 2;
  transform: rotateY(-180deg);
}

.page3 {
  z-index: 3;
  transform: rotateY(-360deg);
}

.page4 {
  z-index: 4;
  transform: rotateY(-540deg);
}

3. 编写 JavaScript 代码

const pages = document.querySelectorAll('.page');
let currentPage = 1;

function nextPage() {
  if (currentPage < pages.length) {
    pages[currentPage - 1].style.transform = 'rotateY(-180deg)';
    currentPage++;
    pages[currentPage - 1].style.transform = 'rotateY(0deg)';
  }
}

function prevPage() {
  if (currentPage > 1) {
    pages[currentPage - 1].style.transform = 'rotateY(-360deg)';
    currentPage--;
    pages[currentPage - 1].style.transform = 'rotateY(0deg)';
  }
}

document.querySelector('.prev-btn').addEventListener('click', prevPage);
document.querySelector('.next-btn').addEventListener('click', nextPage);

4. 添加翻页按钮

<button class="prev-btn">上一页</button>
<button class="next-btn">下一页</button>

通过点击上一页和下一页按钮，可以实现翻页效果。具体效果可以参考下面的链接：

https://codepen.io/mattsince87/pen/exByn