CSS制作翻书效果

使用CSS 3D变换和过渡

通过CSS的transform和transition属性创建基础的翻页效果。关键点在于设置容器的perspective属性和页面的transform-origin。

.book {
  perspective: 1500px;
  width: 300px;
  height: 400px;
}

.page {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-origin: left center;
  transition: transform 1s ease;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

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

添加翻页交互效果

结合JavaScript实现点击触发翻页。通过添加事件监听器切换CSS类名。

document.querySelector('.page').addEventListener('click', function() {
  this.classList.toggle('flipped');
});

实现双面内容展示

利用backface-visibility属性确保背面内容可见，并通过绝对定位在页面正反面放置不同内容。

.page-content {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.front {
  background: #fff;
}

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

创建多页翻书效果

通过z-index和延迟过渡实现连续翻页效果。为每页设置不同的过渡延迟。

.page:nth-child(1) { z-index: 3; transition-delay: 0s; }
.page:nth-child(2) { z-index: 2; transition-delay: 0.1s; }
.page:nth-child(3) { z-index: 1; transition-delay: 0.2s; }

高级3D书籍效果

构建完整的3D书籍外观，添加书脊和阴影增强真实感。

.book-cover {
  transform-style: preserve-3d;
  transform: rotateY(0deg) translateZ(10px);
}

.book-spine {
  position: absolute;
  width: 20px;
  height: 100%;
  left: -20px;
  background: #333;
  transform: rotateY(90deg);
}

响应式设计考虑

通过媒体查询调整翻书效果在不同设备上的表现，确保移动设备上的可用性。

@media (max-width: 768px) {
  .book {
    perspective: 800px;
    width: 200px;
    height: 300px;
  }
}

这些方法可以组合使用来创建从简单到复杂的翻书效果。实际实现时可能需要根据具体需求调整过渡时间、阴影强度和3D透视值等参数。