其他
CSS 实现 3D 书本展开动效
一、前言
本文将使用纯 CSS 实现一个简单的 3D 书本展开动效。
二、实现思路
实现这么一个书本动效 乍一看可能会感觉有些复杂，实际上并不难，遇到这种组合动效的需求时，我们只要将整体拆分成多个小步骤去做，就很简单了。
1. 拆分主体
在实现动效前，我们需要先将书本画出来，画一个本子，我们可以先简单分成三个元素：封皮、书脊、正文
本不打算加入这段，但考虑到有些没有用过的读者，还是简单讲一下。
在现代 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>
实现效果
4. 书本张开效果
现在虽然有了雏形，但是完全闭合的书本并不好看，我们让他有一点微微打开的效果。
通过 rotate 函数，以 x 轴为逆时针旋转 8°， 以 y 轴为顺时针旋转 30°
.book--cover {
/** 省略... **/
transform: rotateX(-8deg) rotateY(30deg);
}
实现效果如下，可以看到有了一些样子，但是旋转是以中心进行旋转的，偏离了书脊，不符合我们的预期。
可以通过 transform-origin 改变元素变型的原点 来调整旋转的位置。
设置 x 轴以左侧为旋转点，y 轴以中心为旋转点进行旋转。
.book--cover {
/** 省略... **/
transform: rotateX(-8deg) rotateY(30deg);
transform-origin: left center;
}
实现效果
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>
三、完整代码
<!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>