Create a Page Turner With Javascript, CSS and HTML

Introduction

In this article we will discuss how to create a simple Page Turner using JavaScript, CSS and HTML. Like this:

Step 1: First we will set the 3-d perspective of the <body> tag like this:

body { -webkit-transform-style: preserve-3d;
-webkit-perspective: 1000px;
text-align: center;
}

Only Safari and Chrome support this perspective property. This property is used to define how many pixels a 3D element is placed from the view.

Step 2: Now we will use our first div tag to show the Album like this:

<div class="pageTurner frontPageTurner" id="frontPageTurnerpageTurner">
<h3>ALBUM </h3>
</div>
<div class="pageTurner back" id="backpageTurner">
<img src="Penguins.jpg" height="120px" width="120px" />
<p>Penguins</p>
</div>

Now we will set its CSS property like this:

.pageTurner { position: absolute; top: 100; height: 200; width:150;
background-color: Khaki; padding: 15;
border-radius: 10; border: 1px solid Tan;
-webkit-transition: -webkit-transform 1.2s;
-webkit-backface-visibility: hidden;
}
.frontPageTurner { left: 225; -webkit-transform-origin: 0px 0px;z-index:1;}

Here we will set the Animation Time Like this

-webkit-transition: -webkit-transform 1.2s;

The following line is used to hide the page turns when it flipped over

-webkit-backface-visibility: hidden;

It defines whether or not an element should be visible when not facing the screen. This property is not supported by Opera.

Here we used z-index property that is used to set the <div> like this

.frontPageTurner { left: 225; -webkit-transform-origin: 0px 0px;z-index:1;}

Now we will write the JavaScript code like this:

<script type="text/javascript">
function flip() {
document.getElementById("frontPageTurnerpageTurner").style.webkitTransform = "rotateY(-180deg)";
document.getElementById("backpageTurner").style.webkitTransform = "rotateY(0deg)";
}
function flop() {
document.getElementById("frontPageTurnerpageTurner").style.webkitTransform = "rotateY(0deg)";
document.getElementById("backpageTurner").style.webkitTransform = "rotateY(180deg)";
}
function main() {
document.getElementById("frontPageTurnerpageTurner").addEventListener("click", flip, false);
document.getElementById("backpageTurner").addEventListener("click", flop, false);
}
</script>

We define the main() function in the <body> tag like this:

<body onload="main();">

This is basically used as a click event.

So when we click on the page it rotates using flip and flop functions and the next (backPageTurner) will be opened. Where we will use an Image like this:

Step 3: Now we will write the code for the remaining pages. First, we will use the <div> tags like this:

<div class="pageTurner back1" id="backpageTurner1">
<img src="Jellyfish.jpg" height="120px" width="120px" />
<p>Jellyfish</p>
</div>
<div class="pageTurner frontPageTurner1" id="frontPageTurnerpageTurner1">
<img src="Lighthouse.jpg" height="120px" width="120px" />
<p>Lighthouse</p>
</div>
<div class="pageTurner back2" id="backpageTurner2">
</div>
<div class="pageTurner frontPageTurner2" id="frontPageTurnerpageTurner2">
<img src="Hydrangeas.jpg" height="120px" width="120px" />
<p>Hydrangeas</p>
</div>

After that we will be set its CSS like this:

.back { left: 60; -webkit-transform-origin: 100% 70%;
-webkit-transform: rotateY(180deg);
}
.frontPageTurner1 { left: 215; -webkit-transform-origin: 0px 0px;z-index:0.8;}
.back1 { left: 57; -webkit-transform-origin: 100% 70%;
-webkit-transform: rotateY(180deg);
}
.frontPageTurner2 { left: 215; -webkit-transform-origin: 0px 0px;z-index:-1;}
.back2 { left: 80; -webkit-transform-origin: 100% 70%;
-webkit-transform: rotateY(180deg);
}
body { -webkit-transform-style: preserve-3d;
-webkit-perspective: 1000px;
text-align: center;
}

After that we will write the JavaScript code like this:

<script type="text/javascript">
function flip() {
document.getElementById("frontPageTurnerpageTurner").style.webkitTransform = "rotateY(-180deg)";
document.getElementById("backpageTurner").style.webkitTransform = "rotateY(0deg)";
}
function flop() {
document.getElementById("frontPageTurnerpageTurner").style.webkitTransform = "rotateY(0deg)";
document.getElementById("backpageTurner").style.webkitTransform = "rotateY(180deg)";
}
function flip1() {
document.getElementById("frontPageTurnerpageTurner1").style.webkitTransform = "rotateY(-180deg)";
document.getElementById("backpageTurner1").style.webkitTransform = "rotateY(0deg)";
}
function flop1() {
document.getElementById("frontPageTurnerpageTurner1").style.webkitTransform = "rotateY(0deg)";
document.getElementById("backpageTurner1").style.webkitTransform = "rotateY(180deg)";
}
function flip2() {
document.getElementById("frontPageTurnerpageTurner2").style.webkitTransform = "rotateY(-180deg)";
document.getElementById("backpageTurner2").style.webkitTransform = "rotateY(0deg)";
}
function flop2() {
document.getElementById("frontPageTurnerpageTurner2").style.webkitTransform = "rotateY(0deg)";
document.getElementById("backpageTurner2").style.webkitTransform = "rotateY(180deg)";
}
function main() {
document.getElementById("frontPageTurnerpageTurner").addEventListener("click", flip, false);
document.getElementById("backpageTurner").addEventListener("click", flop, false);
document.getElementById("frontPageTurnerpageTurner1").addEventListener("click", flip1, false);
document.getElementById("backpageTurner1").addEventListener("click", flop1, false);
document.getElementById("frontPageTurnerpageTurner2").addEventListener("click", flip2, false);
document.getElementById("backpageTurner2").addEventListener("click", flop2, false);
}
</script>