CSS3实现3D翻书效果

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含CSS3,3D,翻书等相关知识,佚名希望在学习及工作中可以帮助到您

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

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

<body>
<div class="book">
<div class="page">
<span>1</span>
<span>2</span>
</div>
<div class="page">
<span>3</span>
<span>4</span>
</div>
<div class="page">
<span>5</span>
<span>6</span>
</div>
<div class="page">
<span>7</span>
<span>8</span>
</div>
<div class="page">
<span>9</span>
<span>10</span>
</div>
<div

您可能想查找下面的文章:

2017-08-06利用负边距技术制作自适应宽度布局的网页
2017-08-06前端必须要掌握的几个CSS3的属性详解
2017-08-06css中display:block;的用法及适用标签详解
2017-08-06用css控制字符串的输出长度超出时隐藏
2017-08-06bootstrap3.0教程之表单(form)使用详解
2017-08-06Google Chrome浏览器无法显示hover样式的解决方法
2017-08-06chrome居中但ie不居中的解决方法
2017-08-06css实现的滑动鼠标到img后切换图片移开恢复默认
2017-08-06CSS重要属性之float学习心得(分享)
2017-08-06使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题

CSS3实现3D翻书效果

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容