前言

最近研究了一下css3的3D效果,写了几个demo,写篇博客总结一下实现的经过。PS:如果对transform-origin/perspective/transform-style这些概念还不了解,可以先看看张鑫旭大神写的这篇通俗易懂的文章:好吧,CSS3 3D transform变换,不过如此!。不过就是里面大神配的图片有点污,不适合在办公室看(手动捂脸)。

效果图

先来看看实际的效果图:

翻书

旋转方块

翻书效果实现过程

html结构如下:

<div class="perspective">
<div class="book-wrap">
<div class="page book-content">end</div>
<div class="page book-content book-content1">第三页</div>
<div class="page book-content book-content2">第二页</div>
<div class="page book-content book-content3">第一页</div>
<div class="page book-cover">封面</div>
</div>
</div>

首先在最外层设置一个perspectivetransform-style,设置子元素为3D透视,并且设置眼睛距离屏幕的距离为800px

.perspective {
margin-top: 100px;
perspective: 800px;
transform-style: preserve-3d;
}

接下来是book-wrap,设置width和height都为300px,并且X轴旋转30deg,这样看着更有立体感,设置子元素为3D透视。

.book-wrap {
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
transform: rotateX(30deg);
transform-style: preserve-3d;
}

然后是page,设置绝对定位并且left和top为0,将所有的page重叠起来.元素旋转的基准位置为left,transform-origin: left

.page {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
transform-origin: left;
border: 1px solid #1976D2;
}

接下来就是使用animation实现动画效果了,我们这里的实现思路是封面页先开始旋转,然后过一秒后是第一页开始旋转,再过一秒是第二页开始旋转,最后是第三页。一个周期设置为6秒,注意每页的延迟时间 + 旋转时间 === 6s

.book-content {
background-color: #fff;
color: #33363C;
}
.book-cover {
background-color: #1976D2;
color: #ffffff;
animation: roll 6s ease 0s 2 alternate;
}
.book-content1{
animation: roll 3s ease 3s 2 alternate;
}
.book-content2 {
animation: roll 4s ease 2s 2 alternate;
}
.book-content3 {
animation: roll 5s ease 1s 2 alternate;
}

这样就使用纯css实现了一个完整的翻书效果,源码地址https://github.com/heavenYJJ/css3/blob/master/translate-book.html

旋转方块

路过webpack官网的时候看见他的logo,觉得很好看,然后就照着他的样子撸了一个出来。使用css3画正方体网上有很多文章,这里我们就不具体描述了,直接贴出源码地址https://github.com/heavenYJJ/css3/blob/master/cube.html。

纯css实现翻书效果的更多相关文章

  1. turn.js实现翻书效果

    JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...

  2. 基于CSS3新属性Animation及transform实现类似翻书效果

    注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...

  3. Turn.js 实现翻书效果的学习与总结

    最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...

  4. JS实现图片翻书效果示例代码

    js 图片翻书效果.  picture.html  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  ...

  5. JS实现图片翻书效果

    picture.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http- ...

  6. [知了堂学习笔记]_css3特效第一篇--旋转的背景&翻书效果

    一.html遮盖层与css3的旋转动画 >效果图(加载可能会慢一点儿,请稍等...): >实现思路:在一个大的div中装入一个底层img和顶层的div(里面的内容按照以上图片呈现的样式布局 ...

  7. css3特效第一篇--旋转的背景&翻书效果

    一.html遮盖层与css3的旋转动画 >效果图(加载可能会慢一点儿,请稍等...): >实现思路:在一个大的div中装入一个底层img和顶层的div(里面的内容按照以上图片呈现的样式布局 ...

  8. 15 个最佳 jQuery 翻书效果插件

    本文为你带来15个非常实用的.实现类似翻书效果的jQuery插件,你可以很容易地整合到你的web应用中,提升用户体验. 1.  BookBlock BookBlock可以将任何内容(如图像.文本)创建 ...

  9. Unity3d:megaFierstext(翻书效果插件)

    附件中是一款翻书效果插件,由于附件上传大小限制,在下载完后,需要在megaFierstext_BHYF\Assets\Resources\Textures下添加图片精灵并修改属性为Texture,即可 ...

随机推荐

  1. React表格报错Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.

    解决: <Table bordered rowKey={record=>record.id} //解决 components={this.components} columns={colu ...

  2. jackson 流式API

    http://www.cnblogs.com/lee0oo0/articles/2652528.html Jackson提供了三种可选的JSON处理方法 1.流式API     com.fasterx ...

  3. Cocos Creator_继承组件单例

    前言 单例,在游戏开发中是比较常用的功能,全局唯一,可以在任何地方直接获取, 省去了方法赋值 或者 属性面板拖动的麻烦. 普通单例_饿汉模式 不管有没调用,一开始就创建单例 1 // Singleto ...

  4. git备注

    下拉仓库 git clone ""建立本地分支 git checkout -b "分支名字" 修改代码以后切换到主分支 git checkout master更 ...

  5. #WEB安全基础 : HTTP协议 | 0x10 扩展HTTP报文结构概念和内容编码

    #以后的知识都是HTTP协议的扩展,如果精力有限可以选择暂时忽略,注意只是暂时忽略,以后的东西同样重要 HTTP传输数据时可以直接传输也可以对数据进行编码,由于编码在计算机内运行,所以会占用一些CPU ...

  6. jpa 使用笔记

    1,嵌套类查询 List<Person> findByAddress_ZipCode(ZipCode zipCode); ZipCode是Address属性的内部属性. 2,jpa in ...

  7. Vue学习3:计算属性computed与监听器

    下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  8. 佳佳的Fibonacci

    #include<cstdio> #include<cstring> #include<iostream> #include<cmath> #inclu ...

  9. 【Codeforces Round】 #432 (Div. 2) 题解

    Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017)  A. Arpa and a research in Mexi ...

  10. DIJKSTRA 临接表

    #include <iostream> #include <algorithm> #include <cmath> #include <cstdio> ...