CSS 实现 3D 书本展开动效

一、前言

本文将使用纯 CSS 实现一个简单的 3D 书本展开动效。

2023-07-18-225831.gif

二、实现思路

实现这么一个书本动效 乍一看可能会感觉有些复杂，实际上并不难，遇到这种组合动效的需求时，我们只要将整体拆分成多个小步骤去做，就很简单了。

1. 拆分主体

在实现动效前，我们需要先将书本画出来，画一个本子，我们可以先简单分成三个元素：封皮、书脊、正文

image.png

2. CSS 变量声明与使用

本不打算加入这段，但考虑到有些没有用过的读者，还是简单讲一下。

在现代 CSS 中，在不使用预处理器的情况下，我们也可以声明 CSS 变量，在当前场景下，我们可以直接将书本的主题色与大小设置为变量，这样我们可以轻松的修改整个书本的样式。

变量声明

CSS 变量定义：带有前缀 -- 的属性名，比如 --example--name，表示声明一个变量。

:root 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同，我们可以在 :root 伪类中声明全局 CSS 变量。

:root {
  --color: red;
}

变量使用

可以通过 var() 函数使用声明的变量。

div {
  color: var(--color)
}

3. 绘制书本主体

根据第一步的拆分，我们将三个主要部分绘制出来。

<style>
:root {
  /* 书本的高度 */
  --main-height: 150px;
  /* 书本的颜色 */
  --theme-bg-color: rgba(239, 112, 155, .9);
}

div {
  box-sizing: border-box;
}

/* 书本主体  */
#book {
  position: relative;
  margin: 150px auto 80px auto;
  width: 150px;
  height: var(--main-height);
  cursor: pointer;
}

/* 书脊 */
.book-side {
  position: absolute;
  left: -14px;
  width: 15px;
  height: var(--main-height);
  border-radius: 5px 0 0 5px;

  background-color: var(--theme-bg-color);
}

/* 封面 */
.book--cover {
  position: absolute;
  top: 0;
  left: -1px;
  padding: 10px;
  width: 105px;
  height: var(--main-height);
  font-size: 18px;
  font-weight: 400;
  border-radius: 0 6px 6px 0;

  background-color: var(--theme-bg-color);
}

/* 书本内容 Begin */
.book--content {
  padding: 4px 5px 4px 2px;
  width: 105px;
  height: var(--main-height);
  border-radius: 2px;

  background-color: var(--theme-bg-color);
}

.book--inner {
  padding: 10px 0;
  width: 100%;
  height: 100%;
  color: #333;
  border-radius: 1px;

  box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.2);
  background-color: rgba(250, 250, 250, 0.8);
}
</style>

<body>
  <div id="book">
    <div class="book-side"></div>
    <div class="book--cover">封面</div>
    <div class="book--content">
      <div class="book--inner"></div>
    </div>
  </div>
</body>

实现效果

Pasted image 20230719001446.png

4. 书本张开效果

现在虽然有了雏形，但是完全闭合的书本并不好看，我们让他有一点微微打开的效果。

通过 rotate 函数，以 x 轴为逆时针旋转 8°， 以 y 轴为顺时针旋转 30°

.book--cover {
  /** 省略... **/
  transform: rotateX(-8deg) rotateY(30deg);
}

实现效果如下，可以看到有了一些样子，但是旋转是以中心进行旋转的，偏离了书脊，不符合我们的预期。

Pasted image 20230719002422.png

可以通过 transform-origin 改变元素变型的原点 来调整旋转的位置。

image.png

设置 x 轴以左侧为旋转点，y 轴以中心为旋转点进行旋转。

.book--cover {
  /** 省略... **/
  transform: rotateX(-8deg) rotateY(30deg);
  transform-origin: left center;
}

实现效果

Pasted image 20230719004005.png

5. 实现动效

完成了书本的基本骨架绘制后，我们可以将动画效果加进来了

鼠标悬浮动效

通过 :hover 伪类设置鼠标悬浮后的效果， 和第四步其实一样，打开效果通过 rotateX 与 rotateY 实现，为了模拟的更加真实，在掀开时加入阴影。

#book:hover .book--cover {
  transform: rotateX(-10deg) rotateY(50deg);
  box-shadow: 30px 0 10px 0 rgba(0, 0, 0, 0.2);
}

这样基本的打开效果就实现好了，但是太过直接，不够平滑，我们对元素加入过度效果。

.book--cover {
  /** 省略... **/
  transition: all .7s linear;
}

这样基本的鼠标效果就实现好了。

书本打开动效

通过 :active 伪类设置长按时的打开效果, 通过 scale 将书本整体适当放大， 并将 封皮 的打开效果尽量放大即可。

#book:active {
  transform: scale(1.7);
}

#book:active .book--cover {
  transform: rotateX(-10deg) rotateY(138deg);
}

添加上面的代码后，便实现了长按打开的效果，为了放大效果更加自然平滑，对 #book 元素添加过渡效果

#book {
  /* 省略... */
  transition: all .7s linear;
}

如此整体功能就实现完成了。

6. 美化内容

功能完成后，我们便可以进一步对书本进行美化，现在整个书本太空，加入一些文字会显得更加丰满充实。

  <div id="book">
    <div class="book-side"></div>
    <div class="book--content">
      <div class="book--cover">
        CSS 圣经
      </div>
      <div class="book--inner">
        <div style="padding-left: 10px">
          <div>~~~</div>
          <div>~~~~~~~~</div>
          <div>~~~~~~~~</div>
          <div>~~~~~~~~</div>
          <div>~~~~~~~~</div>
        </div>
      </div>
    </div>
  </div>

Pasted image 20230719010316.png

三、在线预览

四、完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D 书本动效</title>

  <style>
    :root {
      --main-height: 150px;
      --theme-bg-color: rgba(239, 112, 155, .9);
    }

    div {
      box-sizing: border-box;
    }

    /* 书本主体  */
    #book {
      position: relative;
      margin: 150px auto 80px auto;
      width: 150px;
      height: var(--main-height);
      transition: all .7s linear;
      cursor: pointer;
    }

    /* 书脊 */
    .book-side {
      position: absolute;
      left: -14px;
      width: 15px;
      height: var(--main-height);
      border-radius: 5px 0 0 5px;

      background-color: var(--theme-bg-color);
    }

    /* 封面 */
    .book--cover {
      position: absolute;
      top: 0;
      left: -1px;
      padding: 10px;
      width: 105px;
      height: var(--main-height);
      font-size: 18px;
      font-weight: 400;
      border-radius: 0 6px 6px 0;
      transform-origin: left center;
      transform: rotateX(-8deg) rotateY(30deg);
      transition: all .7s linear;

      background-color: var(--theme-bg-color);
    }

    #book:active {
      transform: scale(1.7);
    }

    #book:hover .book--cover {
      transform: rotateX(-10deg) rotateY(50deg);
      box-shadow: 30px 0 10px 0 rgba(0, 0, 0, 0.2);
    }

    #book:active .book--cover {
      transform: rotateX(-10deg) rotateY(138deg);
    }

    /* 书本内容 Begin */
    .book--content {
      padding: 4px 5px 4px 2px;
      width: 105px;
      height: var(--main-height);
      border-radius: 2px;

      background-color: var(--theme-bg-color);
    }

    .book--inner {
      padding: 10px 0;
      width: 100%;
      height: 100%;
      color: #333;
      border-radius: 1px;

      box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.2);
      background-color: rgba(250, 250, 250, 0.8);
    }
  </style>
</head>

<body>
  <div id="book">
    <div class="book-side"></div>
    <div class="book--cover">CSS 圣经</div>
    <div class="book--content">
      <div class="book--inner">
        <div style="padding-left: 10px">
          <div>~~~</div>
          <div>~~~~~~~~</div>
          <div>~~~~~~~~</div>
          <div>~~~~~~~~</div>
          <div>~~~~~~~~</div>
        </div>
      </div>
    </div>
  </div>

  <p style="text-align:center">长按书本，即可展开书本</p>
</body>

</html>
posted @ 2023-07-19 01:15  子洋丶  阅读(167)  评论(0)  编辑  收藏  举报  来源