css3 书页卷脚_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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_36284062/article/details/111897713

智能推荐

node 与vue-cli之间通过proxyTable实现跨域_node vue proxytable-程序员宅基地

文章浏览阅读153次。node 与vue-cli之间跨域解决方案在vue-cli中proxyTable中如下配置相当于localhost:8080=>localhost:2000 其中的api用来代理一下 接口所在位置为localhost:2000 上 ,本地项目启动在8080 上_node vue proxytable

计算机桌面上的微信图标不显示不出来的,电脑微信图标任务栏不见了怎么办-程序员宅基地

文章浏览阅读1.8w次。1. 电脑桌面的图标任务栏都不见了怎么办,右击鼠标也没反应解决电脑桌面的图标任务栏都不见了怎么办,右击鼠标也没反应的步骤如下:1.按WIN+R键打开运行窗口。在运行对话框中输入regedit,点击确认进入注册表编辑器。2.在注册表编辑器窗口中依次展开:HKEY_CURRENT_USER\Software;在Software的展开项中找到Microsoft,再展开Microsoft;在Micr..._微信任务栏图标不见了

接口测试详解_硬件接口测试-程序员宅基地

文章浏览阅读928次。接口测试详解本文主要讲软件接口一、什么是接口?硬件接口:硬件接口指的是硬件提供给外界的一种实体。主要作用是内部数据分离出外 部的沟通方法目的是:沟通外部来改变内部的数据。如:USB接口,投影仪接口软件接口:软件接口指的是软件提供给外界的一种服务员。主要作用是内部数据分离外 部的沟通方法。目的是:通过外部来改变内部的数据。如:微信的提现和充值的操作, 调用银行对外开发的接口(支付、提现)这些接口有权控制(token(鉴权码),key, appkey)本质:其实就是一个方法,方法有参数和返回值_硬件接口测试

Object.defineProperty的作用_object defineproperty有什么用-程序员宅基地

文章浏览阅读6.6k次。今天给大家分享下我对于Object.defineProperty作用的理解,闲话不多说,我们直接进入正题吧;对象是由多个名/值对组成的无序的集合。对象中每个属性对应任意类型的值。定义对象可以使用构造函数或字面量的形式:除了以上添加属性的方式,还可以使用Object.defineProperty定义新属性或修改原有的属性。 Object.defineProperty()..._object defineproperty有什么用

数值微分法(DDA)详解-程序员宅基地

文章浏览阅读1.1w次,点赞14次,收藏60次。数值微分法(DDADDADDA)一、原理假定直线的起点、终点分别为:(x0,y0)(x_0,y_0)(x0​,y0​),(x1,y1)(x_1,y_1)(x1​,y1​),且都为整数。则过端点P0(x0,y0)P_0 (x_0, y_0)P0​(x0​,y0​),P1(x1,y1)P_1(x_1, y_1)P1​(x1​,y1​)的直线段L:y=kx+bL:y=kx+bL:y=kx+b,直线斜率为:k=y1−y0x1−x0 (x1≠x0)k=\frac{y_1-y_0}{x_1-x_数值微分

Centos 7 下安装confluence_centos 开启confluence关闭-程序员宅基地

文章浏览阅读561次。安装目录:/home/softwares #confluence软件存放目录/home/finance/App/confluence #confluence系统安装目录/home/finance/Data/confluence #confluence数据存放目录[root@192 ~]# mkdir -p /home/softwares[root@192 ~]# mkdir -p /home/finance01/App/confluence[root@..._centos 开启confluence关闭

随便推点

android最简单手机地图APP(只需5分钟)_如何发布手机地图app-程序员宅基地

文章浏览阅读4.3k次。android最简单手机地图APP——只有三部分。第一部分首先建立一个MapActivity在setContentView(R.layout.activity_map);中创建一个WebView>代码如下。[html] view plain copy xml version="1.0" encoding="utf-8"?> RelativeLayout _如何发布手机地图app

Android布局实现圆角边框_android drawable 三个边框 圆角-程序员宅基地

文章浏览阅读588次。首先,在res下面新建一个文件夹drawable,在drawable下面新建三个xml文件:shape_corner_down.xml、shape_corner_up.xml和shape_corner.xml,分别是下面两个角是圆角边框,上面两个角是圆角边框,四个角全部是圆角边框。shape_corner_down.xml:

mysql 端口映射外网访问查询慢的问题_mysql 通过 端口映射非常慢-程序员宅基地

文章浏览阅读3.3k次。mysql之前一直都是在内网访问,前阵子为了方便在外网开发,将端口映射到了外网,但是同事在查询时发现,连接的速度很快,但是在select的时候,非常的慢,本来几毫秒可以查询出来的语句,现在需要1百多秒,实在无法忍受。起初我以为是映射关系的问题,在网络侧一直排查,因为使用的是mariadb,也怀疑是mariadb的问题,还装了mysql5.7来验证,结果还是非常慢。后面在navicat客户端_mysql 通过 端口映射非常慢

gcc中的-w -W和-Wall选项_gcc 中的-wall和-werror有什么作用-程序员宅基地

文章浏览阅读3.6k次。今天在看一个makefile时看到了gcc -W -Wall....这句,不明其理,专门查看了gcc的使用手册。-w的意思是关闭编译时的警告,也就是编译后不显示任何warning,因为有时在编译之后编译器会显示一些例如数据转换之类的警告,这些警告是我们平时可以忽略的。-Wall选项意思是编译后显示所有警告。-W选项类似-Wall,会显示警告,但是只显示编译器认为会出_gcc 中的-wall和-werror有什么作用

IDEA全局import优化/全局格式化一键搞定-代码洁癖必备_idea 全局import-程序员宅基地

文章浏览阅读8.9k次,点赞5次,收藏7次。不只是格式化,还能去除一些空行,进行类成员位置排序,去除多余导入等1.选择要格式化的项目->右键2.选择导入优化与代码格式化两个选项,filters选择all places..._idea 全局import

HDU 2647 Reward(拓扑排序)-程序员宅基地

文章浏览阅读180次。Dandelion's uncle is a boss of a factory. As the spring festival is coming , he wants to distribute rewards to his workers. Now he has a trouble about how to distribute the rewards. The workers wil