纯CSS实现的3D翻页效果

CSS实现的3D翻页效果我是三页翻页。

CSS代码如下：

* {padding: 0;margin: 0;
}
body, html {height: 100%;
}
body {/*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。*/-webkit-perspective: 1000px;-moz-perspective: 1000px;-ms-perspective: 1000px;perspective: 1000px;background-color: #212121;font-family: '微软雅黑';
}
.book {position: absolute;top: 50%;left: 50%;margin-top: -300px;width: 400px;height: 550px;background-color: #fff;-webkit-transform: rotateX(30deg);-ms-transform: rotateX(30deg);-o-transform: rotateX(30deg);transform: rotateX(30deg);
}
.preserve-3d {/*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内,还是在该元素所在的平面内被扁平化。*/-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;/*规定如何在 3D 空间中呈现被嵌套的元素*/transform-style: preserve-3d;
}
.book-page {position: absolute;top: 0;left: 0;width: 400px;height: 550px;/*设置四个边框的样式*/border: 1px solid papayawhip;text-align: center;
}
.book-page-box {-webkit-transform-origin: 0 50%;-moz-transform-origin: 0 50%;-ms-transform-origin: 0 50%;-o-transform-origin: 0 50%;/*设置旋转元素的基点位置*/transform-origin: 0 50%;-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);/*旋转DIV元素*/transform: rotateY(0deg);
}
@keyframes flipBook1 {0% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}50% {-webkit-transform: rotateY(-160deg);-ms-transform: rotateY(-160deg);-o-transform: rotateY(-160deg);transform: rotateY(-160deg);}100% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}
}/* Firefox */
@-moz-keyframes flipBook1 {0% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}50% {-webkit-transform: rotateY(-160deg);-ms-transform: rotateY(-160deg);-o-transform: rotateY(-160deg);transform: rotateY(-160deg);}100% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}
}/* Safari and Chrome */
@-webkit-keyframes flipBook1 {0% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}50% {-webkit-transform: rotateY(-160deg);-ms-transform: rotateY(-160deg);-o-transform: rotateY(-160deg);transform: rotateY(-160deg);}100% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}
}/* Opera */
@-o-keyframes flipBook1 {0% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}50% {-webkit-transform: rotateY(-160deg);-ms-transform: rotateY(-160deg);-o-transform: rotateY(-160deg);transform: rotateY(-160deg);}100% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}
}
@keyframes flipBook2 {0% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}50% {-webkit-transform: rotateY(-150deg);-ms-transform: rotateY(-150deg);-o-transform: rotateY(-150deg);transform: rotateY(-150deg);}100% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}
}/* Firefox */
@-moz-keyframes flipBook2 {0% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}50% {-webkit-transform: rotateY(-150deg);-ms-transform: rotateY(-150deg);-o-transform: rotateY(-150deg);transform: rotateY(-150deg);}100% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}
}/* Safari and Chrome */
@-webkit-keyframes flipBook2 {0% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}50% {-webkit-transform: rotateY(-150deg);-ms-transform: rotateY(-150deg);-o-transform: rotateY(-150deg);transform: rotateY(-150deg);}100% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}
}/* Opera */
@-o-keyframes flipBook2 {0% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}50% {-webkit-transform: rotateY(-150deg);-ms-transform: rotateY(-150deg);-o-transform: rotateY(-150deg);transform: rotateY(-150deg);}100% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}
}
@keyframes flipBook3 {0% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}50% {-webkit-transform: rotateY(-140deg);-ms-transform: rotateY(-140deg);-o-transform: rotateY(-140deg);transform: rotateY(-140deg);}100% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}
}/* Firefox */
@-moz-keyframes flipBook3 {0% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}50% {-webkit-transform: rotateY(-140deg);-ms-transform: rotateY(-140deg);-o-transform: rotateY(-140deg);transform: rotateY(-140deg);}100% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}
}/* Safari and Chrome */
@-webkit-keyframes flipBook3 {0% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}50% {-webkit-transform: rotateY(-140deg);-ms-transform: rotateY(-140deg);-o-transform: rotateY(-140deg);transform: rotateY(-140deg);}100% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}
}/* Opera */
@-o-keyframes flipBook3 {0% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}50% {-webkit-transform: rotateY(-140deg);-ms-transform: rotateY(-140deg);-o-transform: rotateY(-140deg);transform: rotateY(-140deg);}100% {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}
}/*书的封面*/
.book-page-1 .page-front {background-color: cornflowerblue;
}
.book-page-1 .page-back {background-color: #fff;
}
.book-page-1 .page-front p {font-size: 40px;color: #fff;margin-top: 100px;font-family: 华文琥珀;vertical-align:middle;text-align: center;
}
.flip-animation-1 {/*把 "flipBook" 动画捆绑到 div 元素，时长：17 秒*/animation: flipBook1 17s;-moz-animation: flipBook1 17s; /* Firefox */-webkit-animation: flipBook1 17s; /* Safari and Chrome */-o-animation: flipBook1 17s; /* Opera */
}/*书的第二页*/
.book-page-2 .page-back, .book-page-2 .page-front {background-color: #fff;
}
.book-page-2 .page-front p {font-size: 25px;color: #1976D2;font-family: 华文楷体;margin-top: 100px;writing-mode:tb-rl;
}
.flip-animation-2 {/*把 "flipBook2" 动画捆绑到 div 元素，时长：13 秒,延长2秒*/animation: flipBook2 13s 2s;-moz-animation: flipBook2 13s 2s; /* Firefox */-webkit-animation: flipBook2 13s 2s; /* Safari and Chrome */-o-animation: flipBook2 13s 2s; /* Opera */
}/*书的第三页*/
.book-page-3 .page-back, .book-page-3 .page-front {background-color: #fff;
}
.book-page-3 .page-front p {font-size: 30px;color: #1976D2;margin-top: 100px;font-family: 华文楷体;
}
.flip-animation-3 {animation: flipBook3 10s 3s;-moz-animation: flipBook3 10s 3s; /* Firefox */-webkit-animation: flipBook3 10s 3s; /* Safari and Chrome */-o-animation: flipBook3 10s 3s; /* Opera */
}/*书的第四页*/
.book-page-4 .page-front p {font-size: 30px;color: #1976D2;margin-top: 50px;writing-mode:tb-rl;font-family: 华文楷体;
}

html代码

 <!-- 代码部分begin --><!-- 书的主体 --><div class="book preserve-3d"><!-- 书的最后一页 --><div class="book-page-box book-page-4 preserve-3d"><div class="book-page page-front"><p>平生不会相思，才会相思，便害相思，身似浮云，心如飞絮，气若游丝；空一缕余香再此盼千金游子何之，症候来时，正是何时，灯半昏时，月半明时。<br/><br/><br/></p></div></div><!-- 书的第三页 --><div class="book-page-box book-page-3 preserve-3d flip-animation-3"><div class="book-page page-front"><p><br/>文字部分<br/>文字部分<br/><br/>文字部分。<br/>世不相忘。<br/><br/>文字部分<br/>文字部分</p></div></div><!-- 书的第二页 --><div class="book-page-box book-page-2 preserve-3d flip-animation-2"><div class="book-page page-front"><p>文字部分</p></div></div><!-- 书的封面 --><div class="book-page-box book-page-1 preserve-3d flip-animation-1"><div class="book-page page-front"><p><br/><br/><br/><br/>文字部分<br>文字部分</p></div></div></div>

注释里面都有解释。

纯CSS实现的3D翻页效果相关推荐

[原创]纯CSS3打造的3D翻页翻转特效
刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...
html5实现3d翻页效果,利用css3 3d transform制作超逼真翻书效果
本教程给大家带来一个非常有创意的翻书效果,使用的是css 3D transforms属性和css transitions属性.这里将给你展示两种不同的图书设计:精装书和平装书.这两种设计只需要简单的改 ...
简单3D翻页相册制作教程
3D效果看起来总是要比平面的图形看起来视觉效果要好的多,今天来教大家制作简单的3D翻页效果的视频. 视频预览链接:https://v.youku.com/v_show/id_XMzgxOTY5NzQz ...
如何用css实现左右翻页效果图,如何利用CSS3实现3D翻书效果
这篇文章主要介绍了CSS3实现3D翻书效果,基于CSS3新属性Animation及transform实现类似翻书效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下先上效果图:(样式有点丑,可以忽 ...
HTML css实现翻页效果,一个纯CSS3实现的酷炫翻书效果
效果细节其实项目中的关键在于几个属性,perspective和rotate,便是透视和旋转 perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果.z> ...
html翻页特效实现原理,CSS3实现超炫3D翻书效果（二）
上回书,我们已经简单实现如何翻一页.好,现在我们复习一下.翻书效果的基本原理,请看下html布局: 简单再次说明下:box为大盒子,主要提供显示区域的左部分:page为要翻转的页面,其包含正面(fro ...
2.CCGridAction(3D效果)，3D反转特效，凸透镜特效，液体特效，3D翻页特效，水波纹特效，3D晃动的特效，扭曲旋转特效，波动特效，3D波动特效...
1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(cc ...
2.CCGridAction(3D效果)，3D反转特效，凸透镜特效，液体特效，3D翻页特效，水波纹特效，3D晃动的特效，扭曲旋转特效，波动特效，3D波动特效
1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(cc ...
滑动翻页效果_Flutter实现3D效果，一个字，炫！
老孟的博客地址: http://laomengit.com/ Flutter 中3D效果是通过Transform组件实现的,没有变换效果的实现: class TransformDemo extends ...
用纯css实现优雅的tab页,纯CSS实现Tab页切换效果的方法
纯CSS实现Tab页切换效果的方法发布时间:2020-10-26 09:30:20 来源:亿速云阅读:104 作者:小新小编给大家分享一下纯CSS实现Tab页切换效果的方法,希望大家阅读完这篇文 ...

纯CSS实现的3D翻页效果

纯CSS实现的3D翻页效果相关推荐

最新文章

热门文章