打开书本效果：HTML+CSS+JS实现3D逼真翻书

前端

2023-05-31 18:32:48

## 沉浸式体验：打造3D逼真翻书效果

在网络时代，人们对网页交互体验的要求与日俱增。传统的一维静态页面已无法满足用户的需求，取而代之的是更加身临其境、具有交互性的效果。其中，3D翻书效果无疑是近年来最受欢迎的一种。

## HTML+CSS+JS：实现动态翻书效果的利器

要实现3D翻书效果，HTML、CSS和JavaScript可谓是最佳组合。HTML负责构建页面结构，CSS负责样式排版，JavaScript负责添加交互性。通过这三者的紧密配合，我们可以实现各种逼真酷炫的翻书效果。

## 案例分享：打开书本效果

接下来，我们将通过一个实际案例来演示如何使用HTML、CSS和JavaScript来实现一个超nice的打开书本效果。

### 步骤1：准备HTML结构

首先，我们需要准备一个基本的HTML结构。在这个案例中，我们将使用一个简单的div元素来作为书本的容器。

<div class="book">
  <div class="book-cover">
    <img src="book-cover.jpg" alt="Book Cover">
  </div>
  <div class="book-pages">
    <div class="page-1">
      <h1>Page 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget lacus eget nunc tincidunt lobortis.</p>
    </div>
    <div class="page-2">
      <h1>Page 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget lacus eget nunc tincidunt lobortis.</p>
    </div>
  </div>
</div>

### 步骤2：添加CSS样式

接下来，我们需要添加一些CSS样式来美化我们的书本。

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

.book-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-pages {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s ease-in-out;
}

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

.page-1 {
  transform: translateZ(250px);
}

.page-2 {
  transform: translateZ(150px);
}

### 步骤3：添加JavaScript交互

最后，我们需要添加一些JavaScript代码来实现翻书效果。

const book = document.querySelector('.book');
const bookPages = document.querySelector('.book-pages');

let isFlipping = false;

book.addEventListener('mousedown', (e) => {
  if (isFlipping) return;

  isFlipping = true;

  const rect = book.getBoundingClientRect();
  const x = e.clientX - rect.left;

  if (x < book.offsetWidth / 2) {
    bookPages.style.transform = 'rotateY(-180deg)';
  } else {
    bookPages.style.transform = 'rotateY(0deg)';
  }

  setTimeout(() => {
    isFlipping = false;
  }, 500);
});