css制作书翻页

使用CSS制作书翻页效果

要实现书翻页效果，可以利用CSS的transform和transition属性，结合HTML结构创建逼真的翻页动画。以下是两种常见方法：

3D翻页效果

通过CSS 3D变换模拟书本翻页的立体感：

<div class="book">
  <div class="page"></div>
  <div class="page"></div>
</div>

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

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  border: 1px solid #ddd;
  transform-origin: left center;
  transition: transform 1s ease;
}

.page:hover {
  transform: rotateY(-160deg);
}

关键点：

• perspective属性定义3D空间的深度
• transform-origin设置旋转轴心点为左侧边缘
• rotateY实现横向翻页效果

折角翻页效果

创建类似纸张被折起的扁平化效果：

.page {
  background: linear-gradient(to bottom right, #fff 90%, #eee 100%);
  box-shadow: -5px 5px 10px rgba(0,0,0,0.1);
}

.page:hover {
  transform: 
    rotate(-15deg)
    skewY(-5deg)
    translateX(-10px);
}

进阶技巧

添加阴影增强真实感：

.page::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(to left, rgba(0,0,0,0.2), transparent);
  transform: skewY(5deg);
}

多页联动控制：

document.querySelectorAll('.page').forEach((page, index) => {
  page.style.transitionDelay = `${index * 0.1}s`;
});

注意事项

• 在移动端需添加touch事件支持
• 考虑使用will-change: transform优化性能
• 复杂场景可结合CSS变量动态控制旋转角度

以上方法可根据实际需求调整尺寸、过渡时间和视觉效果参数。