CSS制作翻书效果

CSS 翻书效果实现方法

翻书效果可以通过 CSS 3D 变换和动画实现，以下是几种常见的实现方式：

基础 3D 翻页效果

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

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

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

完整书本翻页动画

<div class="book">
  <div class="page front">封面</div>
  <div class="page back">封底</div>
</div>

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

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

.front {
  background: #f5f5f5;
  z-index: 2;
}

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

.book:hover .front {
  transform: rotateY(-180deg);
}

.book:hover .back {
  transform: rotateY(0deg);
}

多页翻书效果

.book {
  display: flex;
  perspective: 2000px;
}

.page {
  width: 200px;
  height: 300px;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.page:not(:first-child) {
  margin-left: -150px;
}

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

.book:hover .page:nth-child(2) {
  transition-delay: 0.1s;
}

.book:hover .page:nth-child(3) {
  transition-delay: 0.2s;
}

关键实现要点

• 使用 perspective 属性创建 3D 空间
• transform-style: preserve-3d 保持子元素的 3D 效果
• transform-origin 设置旋转中心点
• 通过 transition 或 @keyframes 实现动画效果
• 使用 z-index 控制页面叠放顺序

这些方法可以组合使用，根据实际需求调整参数，创建更复杂的翻书效果。