如何用css实现左右翻页效果图,如何利用CSS3实现3D翻书效果

这篇文章主要介绍了CSS3实现3D翻书效果，基于CSS3新属性Animation及transform实现类似翻书效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

先上效果图：(样式有点丑，可以忽略一下下，效果出来了就好，后期加到其他项目中方便更改0.0)

类似翻书效果，原本的意思是使用JS来控制的，点击一次之后使用setInterval去控制书页翻过去的动画，当书页翻转180°之后，清除掉setInterval，但当我连续点击，那之前没有翻转180°的书页将无法继续完成之前的动作，可以用清除setInterval的方式，但总感觉动画效果不好，当然还有其他解决办法，但突然想到，CSS3为我们提供了animation，我们为什么不去使用使用呢，只要为加上animation动画就可以直接避免这个问题，animation动画默认是每次都执行完动画，所以，当出现连点的时候，就会像图中看到的那样，每一页都自然翻页，下面贴上代码，及实现步骤：

注：本实例JS部分均以原生JS编写，不善用原生JS的，可用jQuery等对三方框架改写

html部分：(这部分真心·····，算了，丑就丑点吧~.~)

1

2

3</