3D书本模型：用JS轻松实现的视觉效果

2023-01-18 13:14:54

用 JavaScript 制作精美的 3D 书本模型：打造逼真的阅读体验

引言

身为一个编程爱好者，你是否曾经梦想过用 JavaScript 制作逼真的 3D 效果？现在，你的梦想可以成真了！本博客将指导你使用 JavaScript 轻松创建令人印象深刻的 3D 书本模型。准备好踏上这趟创意之旅了吗？

HTML 骨架

我们的第一步是构建 HTML 骨架。这就像为我们的书本模型奠定基础。在 HTML 代码中，我们创建了一个名为“book”的 div 元素，它包含了四个子元素：前封面、后封面、书脊和书页。

<div class="book">
  <div class="front-cover"></div>
  <div class="back-cover"></div>
  <div class="spine"></div>
  <div class="pages"></div>
</div>

CSS 美化

接下来，是时候为我们的书本模型增添一些视觉魅力了！我们使用 CSS 来设置尺寸、颜色和透视效果，让它看起来栩栩如生。我们为封面和书页设置不同的颜色，为书脊添加一点厚度，并通过透视属性创造深度感。

.book {
  width: 200px;
  height: 300px;
  margin: 0 auto;
  perspective: 1000px;
}

.front-cover {
  background-color: #FF0000;
}

.back-cover {
  background-color: #00FF00;
}

.spine {
  background-color: #0000FF;
}

.pages {
  background-color: #FFFFFF;
}

JavaScript 魔术

现在是时候发挥 JavaScript 的魔力，让我们的书本模型栩栩如生了。我们为“book”元素添加一个事件监听器，以便在鼠标移动时对其进行响应。

JavaScript 会计算出鼠标相对于书本模型的位置，并根据该位置计算旋转角度。然后，它会应用这些角度，让书本模型在 X 轴和 Y 轴上旋转。

const book = document.querySelector('.book');

book.addEventListener('mousemove', (e) => {
  const x = e.clientX - book.offsetLeft;
  const y = e.clientY - book.offsetTop;

  const rotateX = (y - book.offsetHeight / 2) / 10;
  const rotateY = (x - book.offsetWidth / 2) / 10;

  book.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});