CSS3实现3D翻书效果

下面是“CSS3实现3D翻书效果”的完整攻略。

一、基础知识

首先，我们需要掌握以下两个知识点：

CSS3 3D转换（transform-style、transform、perspective）：这是3D翻转效果的基础，用它可以将元素变成3D模式。其中，transform-style可以控制是否开启3D模式，transform可以控制元素的具体变换方式，perspective则可以控制3D场景的透视效果。
物体的旋转和翻转：为了实现3D翻书效果，我们需要掌握如何进行物体的旋转和翻转。这包括rotateX（绕X轴旋转）、rotateY（绕Y轴旋转）等。

二、实现过程

1. HTML 结构

首先，我们需要准备一个 HTML 结构，用于表现书的外观。该结构分为两层，一层表示整本书，一层表示页码。

<div class="book">
  <div class="page page-left"></div>
  <div class="page page-right"></div>
  <div class="page-number"></div>
</div>

其中，.book 表示整本书，.page 表示页码，.page-left 和 .page-right 分别表示左边和右边的页码，.page-number 则表示页码数字。

2. CSS 样式

接下来，我们需要为书的外观设置一些 CSS 样式。

.book {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 50px auto;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.page-number {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
}

这段样式中，我们为 .book 设置了相对定位、宽度和高度，并将其居中对齐。同时，我们为 .page 设置了绝对定位、宽度和高度，并设置了背景颜色和阴影，并将其变为3D模式。而对于 .page-number，我们将其设置为相对定位，并将其放置在页面中央。

3. 翻转效果

现在，我们就可以开始实现翻书效果了。为了实现翻书效果，我们需要控制 .page 元素的旋转和翻转。例如，以下样式可以实现从左往右翻页的效果：

.page-left {
  transform: rotateY(0deg);
}

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

这段样式中，我们将左边的 .page 元素设置为 rotateY(0deg)，即不进行旋转，而将右边的 .page 元素设置为 rotateY(-180deg)，即绕Y轴旋转180度，使得页面背面朝上。

为了实现翻书效果，我们需要给整个 .book 元素设置鼠标事件（例如点击事件或鼠标移动事件），并在该事件上通过改变 .page-left 和 .page-right 的 transform 属性值来改变页面的旋转和翻转效果。例如，以下样式可以实现在单击 .book 元素时翻页的效果：

.book {
  cursor: pointer;
  transition: all 0.5s ease;
}

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

.book.clicked .page-right {
  transform: rotateY(0deg);
}

这段样式中，我们为 .book 元素设置鼠标指针为手型，并设置所有 CSS 过渡（transition）属性值为 0.5 秒和 ease 过渡方式。然后，我们为 .book 元素添加了名为 clicked 的样式，用于处理鼠标单击事件。具体来说，我们为 .book.clicked .page-left 添加了旋转样式 rotateY(180deg)，强制让左边的页面翻转到页面背面，而为 .book.clicked .page-right 添加了旋转样式 rotateY(0deg)，为了从页面的后面顺滑的转到前面的情况。

4. 页码效果

最后，我们需要实现页码效果。为了实现页码效果，我们需要将数字显示在 .page-number 中，并在页面翻转时改变数字的值。我们可以设置两个类别 .odd-page 和 .even-page, 以用于设置页面数字左右的位置。通过 JavaScript 我们可以实现页面翻转时自动更新页面数字。

.odd-page .page-number {
  left: 20px;
}

.even-page .page-number {
  right: 20px;
}

这段样式中，我们将 .odd-page .page-number 的左边距设置为 20px，将 .even-page .page-number 的右边距设置为 20px。

三、示例说明

下面，我将用两个示例来说明如何实现3D翻书效果。

示例一

在这个示例中，我们将实现一个带有自动翻页功能的3D翻书效果。具体来说，当我们打开页面时，右边的页面会开始自动翻转，直到最后一页后停止。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>CSS3 3D翻书效果 - 示例1</title>
    <style>
      /* CSS 样式 */
      .book {
        position: relative;
        width: 300px;
        height: 200px;
        margin: 50px auto;
        cursor: pointer;
        transition: all 0.5s ease;
      }

      .page {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        transform-style: preserve-3d;
        backface-visibility: hidden;
        transition: all 0.5s ease;
      }

      .odd-page .page-number {
        left: 20px;
      }

      .even-page .page-number {
        right: 20px;
      }

      .page-left {
        transform: rotateY(0deg);
      }

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

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

      .book.clicked .page-right {
        transform: rotateY(0deg);
      }
    </style>
    <script>
      // JavaScript 代码
      window.onload = function() {
        var book = document.querySelector('.book');
        var index = 1;
        setInterval(function() {
          index++;
          if (index > 4) {
            index = 1;
          }
          book.setAttribute('data-page', index);
        }, 3000);
      };
    </script>
  </head>
  <body>
    <!-- HTML 结构 -->
    <div class="book" data-page="1">
      <div class="page page-left odd-page" data-page-number="1">
        <div class="page-number">1</div>
      </div>
      <div class="page page-right even-page" data-page-number="2">
        <div class="page-number">2</div>
      </div>
      <div class="page page-left odd-page" data-page-number="3">
        <div class="page-number">3</div>
      </div>
      <div class="page page-right even-page" data-page-number="4">
        <div class="page-number">4</div>
      </div>
    </div>
  </body>
</html>

可以读者看一下这段代码，其中我们将HTML结构、CSS样式和JavaScript代码都封装在了 HTML 文件中，当打开页面后，本例的 JavaScript 代码将自动翻转右边的页面，直到最后一页。

示例二

在这个示例中，我们将在打开页面后立即显示一个3D翻书效果，并通过单击册中后面的页面操作翻书。具体而言，在单击页面时，它将扭曲并显示页面的背面，并显示一个包含页码的页面组件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>CSS3 3D翻书效果 - 示例2</title>
    <style>
      /* CSS 样式 */
      .book {
        position: relative;
        width: 300px;
        height: 200px;
        margin: 50px auto;
        cursor: pointer;
      }

      .page {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        transform-style: preserve-3d;
        backface-visibility: hidden;
        transition: all 0.5s ease;
      }

      .odd-page .page-number {
        left: 20px;
      }

      .even-page .page-number {
        right: 20px;
      }

      .page-left {
        transform: rotateY(0deg);
      }

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

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

      .book.clicked .page-right {
        transform: rotateY(0deg);
      }

      .book.clicked .odd-page {
        transform: rotateY(-180deg);
        z-index: 1;
      }

      .book.clicked .even-page {
        transform: rotateY(180deg);
        z-index: 1;
      }

      .page-back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #ddd;
        transform-style: preserve-3d;
        backface-visibility: hidden;
        transform: rotateY(180deg);
      }

      .page-back .page-number {
        color: #fff;
      }
    </style>
  </head>
  <body>
    <!-- HTML 结构 -->
    <div class="book clicked" data-page="2">
      <div class="page page-left odd-page" data-page-number="1">
        <div class="page-number">1</div>
      </div>
      <div class="page page-right even-page" data-page-number="2">
        <div class="page-number">2</div>
      </div>
    </div>
    <script>
      // JavaScript 代码
      var book = document.querySelector('.book');
      book.addEventListener('click', function() {
        if (book.classList.contains('clicked')) {
          book.classList.remove('clicked');
        } else {
          book.classList.add('clicked');
        }
      });
    </script>
  </body>
</html>

本例比较简单，我们只需要使用基于 HTML 和 CSS 的代码，再添加一些 JavaScript 即可。在这个例子中，我们将所有代码都封装在了 HTML 文件中，通过给 .book 元素添加 .clicked 样式类来实现页面的旋转和翻转效果，并通过单击事件来触发旋转和变形。同时我们还为书添加了一个后续页码元素，用于显示背面页码。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS3实现3D翻书效果 - Python技术站