CSS3实现3D翻书效果

admin CSS 2022-02-06 16:05:17 CSS3 3D 翻书"

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

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

XML/HTML Code复制内容到剪贴板

<body>
<div class="book">
<div class="page">
<span>1span>
<span>2span>
div>
<div class="page">
<span>3span>
<span>4span>
div>
<div class="page">
<span>5span>
<span>6span>
div>
<div class="page">
<span>7span>
<span>8span>
div>
<div class="page">
<span>9span>
<span>10span>
div>
<div class="page">
<span>11span>
<span>12span>
div>
<div class="page">
<span>13span>
<span>14span>
div>
<div class="page">
<span>15span>
<span>16span>
div>
<div class="page">
<span>17span>
<span>18span>
div>
<div class="page">
<span>19span>
<span>20span>
div>
div>
<input type="button" value="上一页" id="before"/>
<input type="button" value="下一页" id="after"/>
body>

CSS部分：（通过改变transform中rotatey的值，来实现书页的翻转效果）

CSS Code复制内容到剪贴板

JS部分（JS部分主要实现点击上/下一页时，为相应的div添加animation属性）

JavaScript Code复制内容到剪贴板

关于最后JS部分，主要作用在于，当点击上/下一页时，为相应的div添加animation属性，具体animation的详解，还是需要查看API。

介于兼容性的问题，这里比较好的解决办法是添加class，而不是去添加animation，为适应更多浏览器，需要添加前缀-webkit-、-moz-·······，所以在一个类中写好这些东西，直接添加类就可以了，或者写一个函数，封装好，能直接输出需要的字符串就好。