CSS3如何实现3D翻书效果

这时我轻轻地闭上了眼睛，我好像来到童话世界，好像在和小鸟讨论秋天的美景，好像在和小草拍秋天的照片。农民伯伯在田野里收获了庄稼，果农们在果园里收获了果子，我们在学校里收获快乐、收获知识、收获成长。

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

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

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

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

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

CSS Code复制内容到剪贴板

<style>
.book{
width:460px;
height:300px;
position:relative;
margin:150px400px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
transform:rotatex(30deg);
}
.page{
width:230px;
height:300px;
border:1pxsolid#666;
position:absolute;
rightright:0;
transform-origin:left;
transform-style:preserve-3d;
backface-visibility:hidden;
font-size:60px;
text-align:center;
line-height:300px;
}
.pagespan{
display:block;
width:100%;
position:absolute;
background-color:#00FFFF;
}
.pagespan:nth-child(2){
transform:rotatey(-180deg);
backface-visibility:hidden;
}
/*以下两个动画可以只使用第一个，animation中有reverse，可以反向执行动画，
使用时需要在JS中点击上一页时添加改属性值*/
/*翻书下一页的动画*/
@keyframespage{
0%{
transform:rotatey(0deg);
}
100%{
transform:rotatey(-180deg);
z-index:10;
}
}
/*翻书上一页的动画*/
@keyframespage1{
0%{
transform:rotatey(-180deg);
z-index:10;
}
100%{
transform:rotatey(0deg);
}
}
</style>

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

JavaScript Code复制内容到剪贴板

<script>
varbefore=document.querySelector("#before");
varafter=document.querySelector("#after");
varbook=document.querySelector(".book");
varpage=document.getElementsByClassName("page");7rotate();
functionrotate(){
varmiddle=0;12for(varz=0;z<book.children.length;z++){
page[z].style.zIndex=book.children.length-z;
}
after.onclick=function(){
if(middle!=book.children.length){
page[middle].style.animation="page1.5slinear1forwards";
middle++;
}else{
middle=book.children.length;
}
};
before.onclick=function(){
if(middle!=0){
page[middle-1].style.animation="page11.5slinear1forwards";
middle--;
}else{
middle=0;
}
}
}
</script>

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

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

本文CSS3如何实现3D翻书效果到此结束。那些刻在椅子背后的爱情，会不会像水泥上的花朵，开出没有风的，寂寞的森林。小编再次感谢大家对我们的支持！

全站频道

大家都在搜索：