您现在的位置是：网站首页> 编程资料编程资料

CSS3实现3D翻书效果css3一款3D字体带阴影效果的实现步骤html5的canvas实现3d雪花飘舞效果css3的图形3d翻转效果应用示例HTML5制作3D爱心动画教程 献给女友浪漫的礼物一款利用纯css3实现的超炫3D表单的实例教程css3实现3D色子翻转特效一款基于css3麻将筛子3D翻转特效的实例教程一款利用html5和css3实现的3D滚动特效的教程css3实现3d旋转动画特效利用HTML5绘制点线面组成的3D图形的示例

2021-09-05 856人已围观

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

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

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

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.       
  3.     <div class="book">  
  4.         <div class="page">  
  5.             <span>1span>  
  6.             <span>2span>  
  7.         div>  
  8.         <div class="page">  
  9.             <span>3span>  
  10.             <span>4span>  
  11.         div>  
  12.   
  13.         <div class="page">  
  14.             <span>5span>  
  15.             <span>6span>  
  16.         div>  
  17.   
  18.         <div class="page">  
  19.             <span>7span>  
  20.             <span>8span>  
  21.         div>  
  22.   
  23.         <div class="page">  
  24.             <span>9span>  
  25.             <span>10span>  
  26.         div>  
  27.   
  28.         <div class="page">  
  29.             <span>11span>  
  30.             <span>12span>  
  31.         div>  
  32.   
  33.         <div class="page">  
  34.             <span>13span>  
  35.             <span>14span>  
  36.         div>  
  37.   
  38.         <div class="page">  
  39.             <span>15span>  
  40.             <span>16span>  
  41.         div>  
  42.   
  43.         <div class="page">  
  44.             <span>17span>  
  45.             <span>18span>  
  46.         div>  
  47.   
  48.         <div class="page">  
  49.             <span>19span>  
  50.             <span>20span>  
  51.         div>  
  52.     div>  
  53.   
  54.       
  55.     <input type="button" value="上一页" id="before"/>  
  56.     <input type="button" value="下一页" id="after"/>  
  57. body>    

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

CSS Code复制内容到剪贴板