CSS3实现3D翻书效果
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改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 class="page">
- <span>11</span>
- <span>12</span>
- </div>
- <div class="page">
- <span>13</span>
- <span>14</span>
- </div>
- <div class="page">
- <span>15</span>
- <span>16</span>
- </div>
- <div class="page">
- <span>17</span>
- <span>18</span>
- </div>
- <div class="page">
- <span>19</span>
- <span>20</span>
- </div>
- </div>
- <!-- 用来控制上一页和下一页操作 -->
- <input type="button" value="上一页" id="before"/>
- <input type="button" value="下一页" id="after"/>
- </body>
CSS部分:(通过改变transform中rotatey的值,来实现书页的翻转效果)
- <style>
- .book{
- width: 460px;
- height: 300px;
- position: relative;
- margin: 150px 400px;
- -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: 1px solid #666;
- position: absolute;
- rightright: 0;
- transform-origin: left;
- transform-style: preserve-3d;
- backface-visibility:hidden;
- font-size: 60px;
- text-align: center;
- line-height: 300px;
- }
- .page span{
- display: block;
- width: 100%;
- position: absolute;
- background-color: #00FFFF;
- }
- .page span:nth-child(2){
- transform: rotatey(-180deg);
- backface-visibility:hidden;
- }
- /*以下两个动画可以只使用第一个,animation中有reverse,可以反向执行动画,
- 使用时需要在JS中点击上一页时添加改属性值*/
- /*翻书下一页的动画*/
- @keyframes page {
- 0%{
- transform: rotatey(0deg);
- }
- 100%{
- transform: rotatey(-180deg);
- z-index: 10;
- }
- }
- /*翻书上一页的动画*/
- @keyframes page1 {
- 0%{
- transform: rotatey(-180deg);
- z-index: 10;
- }
- 100%{
- transform: rotatey(0deg);
- }
- }
- </style>
JS部分(JS部分主要实现点击上/下一页时,为相应的div添加animation属性)
- <script>
- var before = document.querySelector("#before");
- var after = document.querySelector("#after");
- var book = document.querySelector(".book");
- var page = document.getElementsByClassName("page"); 7 rotate();
- function rotate(){
- var middle = 0;12 for(var z=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 = "page 1.5s linear 1 forwards";
- middle++;
- }else{
- middle = book.children.length;
- }
- };
- before.onclick = function(){
- if(middle != 0){
- page[middle-1].style.animation = "page1 1.5s linear 1 forwards";
- middle--;
- }else{
- middle = 0;
- }
- }
- }
- </script>
关于最后JS部分,主要作用在于,当点击上/下一页时,为相应的div添加animation属性,具体animation的详解,还是需要查看API。
介于兼容性的问题,这里比较好的解决办法是添加class,而不是去添加animation,为适应更多浏览器,需要添加前缀-webkit-、-moz-·······,所以在一个类中写好这些东西,直接添加类就可以了,或者写一个函数,封装好,能直接输出需要的字符串就好。
相关文章
- 3D字体而且还带有阴影,这种效果想必大家只有认为一些高级的作图工具才可以实现的吧,css3的出现让这一切看似不可能的实现成为可能,接下来为大家介绍下3D字体带阴影效果的2013-03-20
- 使用HTML5 的canvas标签和 three.js 实现了 3D 的雪花飞舞效果。你可以拖动鼠标进行旋转,需要在支持CSS3属性的浏览器下浏览2013-12-27
- 这篇文章主要介绍了css3 的图形3d翻转效果应用,需要的朋友可以参考下2014-04-08
- 这篇文章主要为大家介绍了一个利用HTML5和CSS3制作的3D爱心动画的教程,可以再任何的时间地点送给自己的女友,相当的浪漫,关键是代码相当简单,直接复制也可以哦2014-11-05
- 今天要给大家分享一款纯css3实现的超炫3D表单。该特效页面的加载的时候3d四十五度倾斜,当鼠标经过的时候表单动画回正。效果非常炫,有具体的代码,大家可以尝试制作哦2014-12-01
- 这篇文章主要介绍了css3实现3D色子翻转特效的制作过程及示例代码,非常的不错,效果也非常棒,这里推荐给大家。2014-12-23
- 这篇文章主要为大家介绍了一款基于css3麻将筛子3D翻转特效的实例教程,css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程2014-12-31
- 怎么利用css3和html5制作圆形很正方形的3D滚动特效,今天给大家带来一款html5和css3实现的3D滚动特效。代码很全,不会的朋友可以可以进来学习一下,需要的朋友可以参考下2015-01-04
- 这篇文章主要介绍了css3实现3d旋转动画特效,使用CSS3实现了3d立方体的左旋转,右旋转,上下旋转等效果,十分实用,有需要的小伙伴来参考下吧2015-03-10
- 这篇文章主要介绍了利用HTML5绘制点线面组成的3D图形的示例,主要还是利用了HTML5中的Canvas API,需要的朋友可以参考下2015-05-12
最新评论