css制作翻页

使用CSS制作翻页效果

翻页效果可以通过CSS的transform和transition属性实现。以下是一个简单的水平翻页效果示例：

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <!-- 正面内容 -->
    </div>
    <div class="back">
      <!-- 背面内容 -->
    </div>
  </div>
</div>

.flip-container {
  perspective: 1000px;
  width: 300px;
  height: 400px;
}

.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}

垂直翻页效果

要实现垂直翻页效果，只需将rotateY改为rotateX：

.flip-container:hover .flipper {
  transform: rotateX(180deg);
}

.back {
  transform: rotateX(180deg);
}

翻页动画控制

通过JavaScript可以更精确地控制翻页动画：

const flipContainer = document.querySelector('.flip-container');
flipContainer.addEventListener('click', function() {
  this.querySelector('.flipper').classList.toggle('flipped');
});

.flipper.flipped {
  transform: rotateY(180deg);
}

3D翻页书效果

创建更复杂的3D翻页书效果需要多层嵌套元素：

<div class="book">
  <div class="page">
    <div class="page-content">第1页</div>
  </div>
  <div class="page">
    <div class="page-content">第2页</div>
  </div>
</div>

.book {
  perspective: 2000px;
  width: 400px;
  height: 600px;
  position: relative;
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.page:nth-child(1) {
  z-index: 2;
}

.page:nth-child(2) {
  z-index: 1;
}

.book:hover .page:nth-child(1) {
  transform: rotateY(-180deg);
}

响应式翻页设计

确保翻页效果在不同设备上正常工作：

@media (max-width: 768px) {
  .flip-container {
    width: 200px;
    height: 300px;
  }

  .book {
    width: 300px;
    height: 450px;
  }
}

这些方法提供了从简单到复杂的CSS翻页效果实现方案，可根据具体需求选择适合的方式。