html5实现3d翻页效果,利用css3 3d transform制作超逼真翻书效果
本教程给大家带来一个非常有创意的翻书效果,使用的是css 3D transforms属性和css transitions属性。这里将给你展示两种不同的图书设计:精装书和平装书。这两种设计只需要简单的改变一些css样式、图片和其他一些小细节就可以完成。
注意: 并不是所有的浏览器都支持这些css属性。
精装书:
精装书由三个部分组成:书的封面、书的脊柱和书的背面。每一个部分都将由伪元素来提供一些厚度。
平装书:
相对于精致书来说,平装书的设计要简单一些。它由一些平面纸组成,没有书的脊柱,只有书的封面、内页和书的背面。
鼠标hover效果
两种书的效果都使用“hover on”和“hover off”来实现过渡效果。“hover on”的样式都定义在书的:hoverclass上,而“hover off”的样式则定义在最先声明的元素的class上。不明白?接着往下看。
Hover on
当我们打开书的时候,书的封面的z-index从100改变到0,为了达到一种平滑过渡的效果,书的内页分别定义把不同的过渡时间。
.book:hover > .hardcover_front {
transform: rotateY(-145deg) translateZ(0);
z-index: 0;
}
.book:hover > .page li:nth-child(1) {
transform: rotateY(-30deg);
transition-duration: 1.5s;
}
.book:hover > .page li:nth-child(2) {
transform: rotateY(-35deg);
transition-duration: 1.8s;
}
.book:hover > .page li:nth-child(3) {
transform: rotateY(-118deg);
transition-duration: 1.6s;
}
.book:hover > .page li:nth-child(4) {
transform: rotateY(-130deg);
transition-duration: 1.4s;
}
.book:hover > .page li:nth-child(5) {
transform: rotateY(-140deg);
transition-duration: 1.2s;
}
Hover off
当我们关书的时候,为了避免内页和封面产生重叠,我们可以减少页面的过渡时间。
.hardcover_front{
transition: all 0.8s ease, z-index 0.6s;
}
.page > li {
width: 100%;
height: 100%;
transform-origin: left center;
transition-property: transform;
transition-timing-function: ease;
}
.page > li:nth-child(1) {
transition-duration: 0.6s;
}
.page > li:nth-child(2) {
transition-duration: 0.6s;
}
.page > li:nth-child(3) {
transition-duration: 0.4s;
}
.page > li:nth-child(4) {
transition-duration: 0.5s;
}
.page > li:nth-child(5) {
transition-duration: 0.6s;
}
封面设计
这个demo中的封面设计非常简单,精装书只是添加了一个coverDesign的class,并且用::after伪类为书添加一些背景和图片
.coverDesign {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.coverDesign::after {
background-image: -webkit-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
background-image: -moz-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
background-image: linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
平装书则是使用了一个img来做封面。
最后为它们添加一些好看的ribbon效果。
html5实现3d翻页效果,利用css3 3d transform制作超逼真翻书效果相关推荐
- js模拟制作超逼真的雪花效果
<春雪> 唐·东方虬 春雪满空来,触处似花开. 不知园里树,若个是真梅. <红林擒近·寿词·满路花> 宋·陈允平 三万六千顷,玉壶天地寒.庾岭封的皪,淇园折琅.漠漠梨花烂漫,纷 ...
- 黑色白色文字阴影HTML,利用css3的text-shadow属性实现文字阴影乳白效果
现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...
- html 页面下雪效果,HTML5超逼真下雪场景效果
简要教程 这是一款基于jquery的超逼真下雪场景特效.该特效使用jquery代码来动态插件html5 canvas元素,然后在canvas中制作下雪特效. 使用方法 在页面中引入ThreeCanva ...
- android 辅助功能 翻页,Android利用悬浮按钮实现翻页效果
今天给大家分享下自己用悬浮按钮点击实现翻页效果的例子. 首先,一个按钮要实现悬浮,就要用到系统顶级窗口相关的WindowManager,WindowManager.LayoutParams.那么在An ...
- css使图片有3d效果,利用CSS3实现3D倾斜视差图片展示特效
特效描述:利用CSS3实现 3D倾斜 视差图片 展示特效.利用CSS3实现3D倾斜视差图片展示特效 代码结构 1. HTML代码 Movies Popular Princess Mononoke Sp ...
- html图片爆炸效果,利用CSS3制作3D图片爆炸效果
利用css3 transform和transition样式制作点击图片时 图片爆炸开并切换到下一张图片依次循环 首先先看一下效果图 Paste_Image.png 先描述一下大概思路: 布局时外面有一 ...
- linux+手机+翻页,在Android手机上实现阅读器的翻页效果
本篇文章来谈谈怎么使用java实现翻页效果,就像电子阅读器那样. 现在先来看看翻页的原理图: 先了解各个字母表示的含义: A-把书页翻起来后看到的背面区域 B-把书页翻起来后看到的下一页的一角 C-当 ...
- html显示时钟 翻页 js,js css3翻页数字时钟代码
特效描述:js css3翻页数字时钟.js获取本地时间数字时钟翻页动画代码. 代码结构 1. 引入JS 2. HTML代码 'use strict'; function _classCallCheck ...
- 前端Vue书籍翻页功能利用turn.js来完成以及知识点(源码)
目录 下载 文档 开始 构造方法 可配置项 方法 语法 事件 两种方式添加事件 自动翻页loading加载功能 案例 CSS basic.css源码如下 JS里面代码太多了,直接官网下载 index. ...
最新文章
- 设计模式:单例模式之双重检查
- Android显示广播写法,【Android】广播的写法
- 在Kubernetes上运行SAP UI5应用
- oracle 10g 企业管理器无法打开解决方法
- 暑期训练日志----2018.8.5
- 构造方法 c# 0106
- Django使用Python操作数据库 --Django 1.8.2 文档(中文)部分笔记
- linux下amd超频工具,AMD锐龙超频民间工具Work Tool:可单独超CCX模块
- html盒子中盒子排列,解析CSS的box model盒模型及其内的子元素布局控制
- 针对ARP协议的病毒攻击的简单分析
- 微信隐藏功能系列:微信怎么恢复聊天记录?3步完成修复
- Android串口开发
- 20年研发管理经验谈(十七)(终结)
- 像把大象放入冰箱那样制造芯片
- 中控智慧身份证读卡器工具类
- 犀利姐—林家小妹:将犀利进行到底!
- 9.4 Scratch3/www,踩坑,修改chroblocks模块LED输入方式,第五天:修改模块并同步一键云部署(软连接制作,密钥生成,编写shell脚本实现发布,与git pull 分支更新)。
- Vue中使用find函数
- zabbix6.4 Database history tables upgraded
- 完整版 | 2021 年 Apache Pulsar 用户调查报告
热门文章
- xorg.conf变更导致开机无法显示
- Fine-tunning适用情况
- GuGuFishtion(2018 Multi-University Training Contest 7)
- HDU 6833 A Very Easy Math Problem
- P5488 差分与前缀和(多项式/生成函数)
- CF1158D. Beautiful Array
- P4570 [BJWC2011]元素
- 牛客网 【每日一题】7月27日题目精讲—乌龟棋
- [ZJOI2015] 幻想乡战略游戏(树链剖分 + 线段树二分 + 带权重心)
- [2021.4.7多校省选模拟33]A,B,C