css3 书页卷脚_css3实现的书本立体翻页效果代码实例
[HTML] 纯文本查看 复制代码
蚂蚁部落
* {
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: -150px;
width: 300px;
height: 300px;
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;
transform-style: preserve-3d;
}
.book-page {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
border: 1px solid #1976D2;
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);
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: #1976D2;
}
.book-page-1 .page-back {
background-color: #fff;
}
.book-page-1 .page-front p {
font-size: 30px;
color: #fff;
margin-top: 100px;
}
.flip-animation-1 {
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: 30px;
color: #1976D2;
margin-top: 100px;
}
.flip-animation-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;
}
.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: 100px;
}
第三页
第二页
第一页
翻页特效
flip-book
css3 书页卷脚_css3实现的书本立体翻页效果代码实例相关推荐
- 手机html5翻页效果代码,jquery html5手机端翻书效果_手指滑动书本翻页效果代码
特效描述:jquery html5手机端翻书 手指滑动 书本翻页效果.显现手机端翻书效果,支持手拖动翻页 代码结构 1. 引入JS 2. HTML代码 function loadApp() { // ...
- HTML5电子书翻页效果 代码特效+鼠标点击拖拽滑动翻页+点击书页内容放大+不支持中文
介绍 源码名称:[HTML5电子书翻页效果]代码特效+鼠标点击拖拽滑动翻页+点击书页内容放大+不支持中文 源码大小:237KB 开发语言:PHP+Mysql 操作系统:Windows,Linux 源码 ...
- 纯CSS3书本打开翻页js特效
下载地址 纯CSS3书本打开翻页特效是一款基于css3 keyframes属性制作的设置多张背景图片组合成打开的书本自动翻页效果. dd:
- css3实现书本翻页效果
css3翻页效果 关键要点: 1.css3 3d动画的掌握 2.如何解决翻转后页面内容的改变 3.如何保持书本一直处于居中位置 代码总览 <!DOCTYPE html> <html ...
- unity 制作书本 翻页效果
unity 制作书籍翻页效果 unity C# 翻书效果 2D 真实翻页 不使用插件 自制 实现思路: 将书本分为两边,一边一个翻页实现: 下图为书本的右面,以OA为分界线,△OAB是下一面的如上图的 ...
- 用Cocos Creator 模拟书本翻页效果
1.简介 本文主要探讨了如何使用CocosCreator来模拟书本翻页效果,分别介绍了通过使用贝塞尔曲线和verlet积分算法来模拟书页底边在翻页过程中的弯曲形变,最后通过自定义assembler传入 ...
- 用 Cocos Creator 模拟书本翻页效果
本篇文章作者:乐府-贝塔 乐府-贝塔:乐府前端核心开发,从事游戏开发多年,从 Cocos2d-x 做到 Cocos Creator,擅长渲染技术的相关优化.多年的前端开发经验激发了对技术研究的深厚兴趣 ...
- HTML css实现翻页效果,一个纯CSS3实现的酷炫翻书效果
效果细节 其实项目中的关键在于几个属性,perspective和rotate,便是透视和旋转 perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果.z> ...
- 使用transform制作书本翻页效果
transform transform属于CSS属性 Transform属性应用于元素的2D或3D转换.这个属性允许你将元素旋转,缩放,移动,倾斜等. 在网页中需要制作一些有立体感的3d效果,比如书本 ...
最新文章
- 一个简单的C++程序,回顾基本语法
- 【android-tips】如何在view中取得activity对象
- SAP传输停止错误：Test call of transport control program (tp) ended with return code 0208！
- 基于深度学习和机器学习的心电图智能分析参赛总结
- 婚姻就像一双鞋，合不合适只有脚知道
- oracle today函数,oracle日期函数集锦
- JAVA中神奇的双刃剑--Unsafe
- Python的bool类型
- 清华90后博士后26岁已在《科学》发文6篇
- mybatis源码分析执行流程
- 局域网操作技巧与配置实例
- SHELL脚本也要函数化
- 163 Blog试用有感
- OpenDaylight你不可不知的十大问题——OpenDaylight是什么？
- HackerRank数据库题目练习(2)
- laravel完全安装手册
- 基于JAVA民航售票管理系统计算机毕业设计源码+数据库+lw文档+系统+部署
- 1148: 组合三位数之一 C语言
- 2019 杭电第九场1007 Rikka with Travels
- 软件著作权（含源码、说明书、合作协议、以及提交软著的相关注意事项）