使用CSS3实现翻书效果（二）

        原来一直使用QQ直接登录的博客，今天绑定了一下邮箱，原来的博客全没了，只好把原来备份的博文重新发了一下，还好只有两篇~

        昨天把css3实现翻书样式的效果实现了大半，今天将其主体的样式全部实现了，下面将进行说明：

        我们仔细观察书本的样式发现书本底下是有阴影的，而且阴影可以随着翻书的动作来移动，书皮的左右两侧也分别有一条封边，看起来非常真实，这里主要是使用了元素的after和before属性，对其进行了实现。

　　首先是静止的阴影的代码：

.bottom li:nth-child(1):before{
    content: "";
    width: 4px;
    height: 100%;
    position: absolute;
    top:0;
    left: 100%;
    background-color: #8B8B8C;
    box-shadow: 10px -1px 80px 20px #666;
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-100px) translateX(2px) translateY(80px);
}

        这里可以看到，我们对最底部几乎不动的书页的第一页的before属性加上了一个外阴影，只是加上外阴影的话它会出现在书页的左侧，所以将其进行了旋转，转到了书本的下方，再根据需要进行x轴和y轴的平移最终完成了静止部分阴影的效果。

        下面是跟随页面翻动的左侧阴影效果：

.front li:nth-child(1):before{
    content: "";
    width: 4px;
    height: 100%;
    position: absolute;
    top:0;
    left: 100%;
    background-color: #8B8B8C;
    box-shadow: 10px -1px 80px 20px #666;
     -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-100px) translateX(2px) translateY(80px);
}

        这段代码与上面的代码几乎一样，只是before的对象变成了front也就是上本书页，这样在翻动时，阴影就会随之移动。

　　最后是书页、封皮左右封边效果的实现：

.cover li:nth-child(1):after {
    content: "";
    width: 4px;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    background-color: #8B8B8C;
}
.cover li:nth-child(1):before{
    content: "";
    width: 4px;
    height: 100%;
    position: absolute;
    top:0;
    left: 100%;
    background-color: #8B8B8C;
}

　　对书皮的第一个li设置4个像素的宽度，100%的高度然后分别使用left把他们放到两边这样就轻松完成了封边的效果，这样使用css3实现书籍样式就完成了，其他还有一些细节的地方比如鼠标离开书籍合上的动画，相当于执行一次反操作，我这里就没有写啦~~

　　总结：before和after对于给一个模块加细节实在是不要太好用，感觉像是物理引擎中给父对象加上一个子节点的感觉，它可以附着在父对象上，跟随者父对象的DOM操作而移动变化，不用再写新的DOM。但是也与不好之处，比如在本案例中，如果我们想使书籍打开后，仍能看到封面左侧封边的效果（给front的backface-visibility属性设置为hidden，翻过去就看不见了，跟背面剪裁一样），给before设置效果是无效的，所以还是要灵活使用啦。还有记得使用before,after时一定要加上content，就算没有内容也得加上，开始我没有加怎么试都试不出来效果，最后附上成品的图片：

效果就是这么个样子，我传到github上啦，有兴趣看看哦~

地址（fflippage2是完整版的）：https://github.com/StringKun/Fflippage