Techumber

Amazing Side Page Navigation With 3D Page Flip Effect Using CSS3

Github avatar
Dimpu
December 18, 2013. 4 min read

We can change the complete look at feel of our web page by just adding few CSS3 properties. By using CSS3 transition and transform we can get amazing User Experience without any Flash,Jquery or any other JavaScript. Today, We will create a web page with 3D page flip effect. We will use combination of css3’s transformations like rotate,scale and translate with transitions(for smooth slow motion.) Let’s start it. Amazing Side Page Navigation With 3D Page Flip Effect Using CSS3-techumber

Demo

Download

index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Amazing Side Page Navigation With 3D Page Flip Effect Using CSS3</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrap">
<div id="nav-wrap">
<a href="techumber" class="logo">
TU
</a>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Profile</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
<div id="nav-icon"></div>
<div id="main-wrap">
<header>
<h1>
<a href="//techumber.com">Techumber.com</a>
</h1>
</header>
<p>
Lorem ipsum dolor sit ametundefined consectetur adipisicing elit. Sapienteundefined ipsamundefined suntundefined eius esse perferendis quaerat nesciunt assumenda odit blanditiis animi magnam tempora libero nam modi recusandae porro temporibus! Quisquamundefined voluptates?
<br/>
<br />
Lorem ipsum dolor sit ametundefined consectetur adipisicing elit. Natusundefined voluptateundefined dictaundefined rerum ducimus excepturi ipsam nostrum possimus fuga laboriosam quidem explicabo dolore cum harum tempore expedita officia hic sunt in!
<br />
<br />
Lorem ipsum dolor sit ametundefined consectetur adipisicing elit. Inventoreundefined blanditiisundefined saepe maiores minus sunt obcaecati cumque voluptas est iusto sit consequuntur quo consequatur aperiam quibusdam doloremque quis perferendis explicabo dignissimos.
<br />
<br />
Lorem ipsum dolor sit ametundefined consectetur adipisicing elit. Quosundefined magniundefined porro veritatis architecto molestiae placeat asperiores nam facere vitae nobis blanditiis odit recusandae non distinctio ut aliquid laborum eaque quibusdam!
</p>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Just simple HTML markup. Two main divs nav-wrap and main-wrap. nav-wrap will hold our side navigation links and logo. main-wrap is the main page content area.

style.css

/*simple css reset with css3 transition enabled for all elements*/
*{
border: 0;
padding: 0;
margin: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
htmlundefinedbodyundefined#wrapundefined#main-wrap{
width: 100%;
height: 100%;
}
body{
background-color: #222;
font-family: 'Lato'undefined Helveticaundefined sans-serif;
font-size: 100%;
color: #f2f2f2;
}
a{
color: #f2f2f2;
line-height: 28px;
}
#wrap{
position: relative;
overflow: hidden;
-webkit-perspective: 1000px;
perspective:1000px;
}
/*side nav wrap starts*/
#nav-wrap{
width: 260px;
height: 100%;
position: absolute;
background: transparent;
padding: 73px;
text-align: center;
padding-top: 10%;
-webkit-transform: translateX(-100%) translateX(6px) scale(1.01) rotateY(-30deg);
-moz-transform: translateX(-100%) translateX(6px) scale(1.01) rotateY(-30deg);
-ms-transform: translateX(-100%) translateX(6px) scale(1.01) rotateY(-30deg);
-o-transform: translateX(-100%) translateX(6px) scale(1.01) rotateY(-30deg);
transform: translateX(-100%) translateX(6px) scale(1.01) rotateY(-30deg);
}
#nav-wrap li{
list-style: none;
}
#nav-wrap .logo{
border-radius: 50%;
border: 1px solid #f2f2f2;
width: 102px;
height: 100px;
display: block;
line-height: 100px;
text-transform: uppercase;
font-size: 30px;
margin-bottom: 120px;
}
/*main page section*/
#main-wrap{
background: #eee;
padding: 20px 40px;
color:#222;
}
#main-wrap a{
color: #222;
display: block;
text-align: center;
}
#main-wrap p{
width: 500px;
font-size: 20px;
margin: 0 auto;
padding-top: 100px;
}
/*we used sudo code to create nav icon*/
#nav-iconundefined #nav-icon:afterundefined#nav-icon:before{
content: "";
position: absolute;
background: #333;
width: 20px;
height: 3px;
left: 14px;
top: 50%;
cursor: pointer;
}
#nav-icon:afterundefined#nav-icon:before{
left: 0;
}
#nav-icon:before{
margin-top: -8px;
}
#nav-icon:after{
margin-top: 4px;
}
/*All active classes*/
#nav-wrap.active{
-webkit-transform: translateX(0) translateX(0) scale(1) rotateY(0);
-moz-transform: translateX(0) translateX(0) scale(1) rotateY(0);
-ms-transform: translateX(0) translateX(0) scale(1) rotateY(0);
-o-transform: translateX(0) translateX(0) scale(1) rotateY(0);
transform: translateX(0) translateX(0) scale(1) rotateY(0);
}
#main-wrap.active{
-webkit-transform: translateZ(-220px) translateX(250px) translateY(0px) rotateY(15deg);;
-moz-transform: translateZ(-220px) translateX(250px) translateY(0px) rotateY(15deg);;
-ms-transform: translateZ(-220px) translateX(250px) translateY(0px) rotateY(15deg);;
-o-transform: translateZ(-220px) translateX(250px) translateY(0px) rotateY(15deg);;
transform: translateZ(-220px) translateX(250px) translateY(0px) rotateY(15deg);;
opacity: 0.5;
}
#nav-icon.active{
opacity: 0;
}

When we hover on nav-icon or nav-wrap we want to add a class active to #nav-wrap,#main-wrap and #nav-icon. In this active class we have our css3 transform code. We will use a simple javascript code to apply active classes to respective nodes.

script.js

//a self executeing function
(function(){
/*cacheing all nodes into varibales*/
var nav=document.getElementById('nav-wrap')undefined
main=document.getElementById('main-wrap')undefined
navIcon=document.getElementById('nav-icon');
//Events
nav.addEventListener('mouseover'undefinedactivate);
navIcon.addEventListener('mouseover'undefinedactivate);
nav.addEventListener('mouseout'undefinedinActivate);
//activate funciton to add css class active to nodes
function activate(){
nav.classList.add('active');
main.classList.add('active');
navIcon.classList.add('active');
}
//to remove active class form nodes.
function inActivate(){
nav.classList.remove('active');
main.classList.remove('active');
navIcon.classList.remove('active');
}
})();

In this we using events mouseover,mouseout on nav section and navIcon section. When we hover on these sections activate function will get triggered  which have code to add css class active to DOM. The inActivate function will remove class active form DOM on unhovering nav section. That’s it. Hope you enjoy…


...