"Flip Book with javascript"
Bootstrap 3.0.0 Snippet by muhittinbudak

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="flipbook centered" id="flipbook">
<div class="leaf">
<div class="page front title external" style="background-color:#e76f51;">
<h1>Flip Book</h1>
<em>A lil dive into 3d css</em>
</div>
<div class="page back" style="background-color:#2a9d8f;">
<div class="pageNumber">i</div>
<img src="https://picsum.photos/200/301" alt="" style="width:100%">
</div>
</div>
<div class="leaf">
<div class="page front" style="background-color:#2a9d8f;">
<div class="pageNumber">ii</div>
<h2>Contents</h2>
<div class="contents-row">
<div class="text">Cat Ipsum</div>
<div class="spacer"></div>
<div class="text">1</div>
</div>
<div class="contents-row">
<div class="text">Lorum Ipsum</div>
<div class="spacer"></div>
<div class="text">3</div>
</div>
</div>
<div class="page back" style="background-color:#e9c46a;">
<div class="pageNumber">1</div>
<h2>Cat Ipsum</h2>
<p>
Attack like a vicious monster fight an alligator and win. Catty ipsum chew the plant and love to play with owner's hair tie kick up litter open the door, let me out, let me out, let me-out, let me-aow, let meaow, meaow!
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{
min-height:100vh;
margin:0;
max-height:100vh;
overflow:hidden;
background-color:#264653;
}
*{
box-sizing:border-box;
}
.centered{
margin:auto;
width:max-content;
}
.flipbook{
margin:3em auto;
width:400px;
height:300px;
position:relative;
transform-style: preserve-3d;
perspective:1000px;
.leaf{
position:absolute;
transform-style: preserve-3d;
height:100%;
width:50%;
background-color:#fff;
left:50%;
transition:transform 1s;
transform:rotate3d(0 ,1 , 0, 0deg);
transform-origin:left 0px;
//border:1px solid #000;
.page{
transform-style: preserve-3d;
position:absolute;
width:100%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
class FlipBook{
constructor(bookElem){
this.elems={
book:bookElem,
leaves:bookElem.querySelectorAll(".leaf"),
buttons:{
next:document.getElementById("nextPage"),
prev:document.getElementById("prevPage")
}
};
this.setupEvents();
this.currentPagePosition = 0;
this.turnPage(0);
}
setPagePosition(page,position,index){
var transform = "";
transform = "translate3d(0,0,"+((position<0?1:-1)*Math.abs(index))+"px)"
if(position<0){
transform+="rotate3d(0,1,0,-180deg)";
page.classList.add("turned")
}else{
page.classList.remove("turned")
}
if(page.style.transform != transform){
page.style.transform = transform;
}
}
turnPage(delta){
this.currentPagePosition+=delta;
if(this.currentPagePosition < 0){
this.currentPagePosition = 0;
return;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Gaia Bootstrap Template
Glyphicon Animate, Rotation and Flip

Questions / Comments: