CSS实现3D书本效果的示例代码

实现3D书本效果需要借助CSS3的transform属性中的rotateX、rotateY、translateZ等值。下面是一个实现3D书本效果的示例代码以及详细解释：

示例代码

<div class="book">
  <div class="cover">
    <div class="front">封面</div>
    <div class="back">封底</div>
  </div>
  <div class="page page1">第一页</div>
  <div class="page page2">第二页</div>
  <div class="page page3">第三页</div>
</div>

.book {
  width: 200px;
  height: 300px;
  position: relative;
  perspective: 1000px; /* 透视 */
}

.cover {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 30px;
  text-align: center;
  transform-style: preserve-3d; /* 保持3D */
}

.cover > div {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面 */
}

.front {
  background-color: #F39019;
  transform: rotateY(0deg); /* 按Y轴旋转0度显示正面 */
}

.back {
  background-color: #c02a2a;
  transform: rotateY(180deg); /* 按Y轴旋转180度显示背面 */
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 20px;
  text-align: center;
  line-height: 300px;
  background-color: #fff;
  transform-style: preserve-3d; /* 保持3D */
  transform: rotateY(-90deg) translateZ(150px); /* 按Y轴旋转-90度并移动Z轴距离实现翻开效果 */
  opacity: 0; /* 初始不可见 */
  transition: all 0.5s; /* 动画时间 */
}

.page1 {
  transform: rotateY(0deg) translateZ(0); /* 第一页 */
  opacity: 1;
}

.page2 {
  transform: rotateY(-90deg) translateZ(150px); /* 第二页 */
}

.page3 {
  transform: rotateY(-180deg) translateZ(0); /* 第三页 */
}

在这个例子中，我们创建了一个具有3D书本效果的容器，包括了一个封面和三页内容。我们通过修改内容的transform属性中的rotateY、translateZ来实现翻页效果。具体步骤如下：

1. 我们在book容器中设置了透视值，perspective，这个值决定了远近景(the amount of depth that appears on the screen)。我们也将该div设置成相对定位
2. 在book div中创建一个cover div，这个cover div代表书本的表面。在cover div中，我们垂直于x轴设置透视，这个例子设置成1000px。启用颜色和背景图像后，我们将cover 中的2个子div前台可见 and 没有背景。我们在前div(front)中设置rotateY(0deg)代表它朝向的方向是“正”积极方向。反之，我们在后面div(back)中设置rotateY(180deg)以将其旋转到背面上
3. 接下来的三页(page)容器使用preserve-3d启用3D渲染，它们与div容器位于同一3D空间中。我们使用perspective和rotateY，在page中把它们放在书上的不同位置。
4. 使用transform：rotateY(-90deg) translateZ(150px)将“第2页”对齐到封面的右侧。在这里，我们从left to right进行翻页。 z轴距离的大小是transform对translateZ值的影响。translateZ越大，距离就越远，并且翻转的角度就越小。
5. 使用元素的opacity属性设置所有页的初始状态为0。
6. 通过设置transform: rotateY(0deg) translateZ(0); 以表明第1页位于“书”的正面。
7. 其余的页分别设置transform: rotateY(-180deg) translateZ(0); 以表明它们位于书的背面。当我们翻页时，我们会看到这里的关键是rotateY的值，我们会用从负角度到正角度的方式进行从左到右的翻页。

这些是实现3D书本效果的基本代码。这篇文章中的其他示例可以用类似的方式进行。