CSS技术3D效果实现主要依赖于CSS提供的3D变形相关属性与方法，借助于伪元素before与after属性及hover等属性，模拟实现动画效果。本文主要介绍使用CSS技术实现3D书本效果。最终实现效果展示如下所示：

基本技术及原理说明

1、伪类hover与active

伪类主要用于实现向HTML页面元素添加特殊效果。其中hover与active用于实现鼠标悬浮与点击激活时设置对应元素的样式。其中

hover用于实现鼠标悬停时设置或添加元素样式，实例代码如下：

.book:hover{ transform: rotateY(45deg); }

该代码用于实现对book类添加鼠标悬停样式设置，设置绕y轴旋转45度。

active类主要用于实现向被激活的元素添加样式，所谓被激活可以理解为鼠标点击该元素。实例代码如下：

.book:active{ transform: rotateY(180deg); }

该代码主要用于实现鼠标点击时将book类进行Y轴180度反转。我们在实际项目中最终实现鼠标悬浮旋转45度及点击反转180度就是借助这两个类实现的。

2、3D书本模型设置

本例所展示的3D书本模型与之前我们介绍的旋转盒子相比较较为简单，旋转盒子模型需要6个面，因此我们使用了6个DIV层模拟实现各面。本例所需实现的书本我们只需要设置三个面，即书本的正反面与书脊部分，因此我们使用before与after伪元素进行设置，通过book类，book：before与book：after模拟实现三个页面。其中：

book类为3D书本容器类，只需要定义宽度width、高度height，盒子阴影box-shadow与transform-style变形的类型即可。

book：before用于实现书脊部分定义；

book：after用于实现书反面样式定义；

实现过程及核心代码

1、基本素材准备

本例需要实现3D书本效果，因此需要搜集平面展示的书本设计图片，并且使用PS工具进行切图处理。素材描述如下图所示：

使用如上平面书本图片，PS进行切图，在切图过程中注意保证封面前后寸尺一致，剩余中间部分为书脊。制作好之后即可使用HTML CSS进行3D书本效果设计实现。

2、书本设计与实现

在进行设计时首先第一步需要完成页面元素设计即页面布局设计，实现代码描述如下图所示：

页面基本布局及元素使用描述如上图所示，其中book类为容器，内部使用img实现书本前页面展示。book类设计代码如下：

剩余两页面分别为书脊与书背面，使用伪元素before与after进行设计，其中before伪元素设计如下：

书本中间部分样式设置如上图所示，背面页面设计实现代码如下所示：

3、动画效果

动画效果主要借助hover与active实现，该部分实现较为简单，即悬停旋转45度，点击旋转180度，实现代码如下：

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！