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

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="http://techumber.com">Techumber.com</a>  
</h1>  
</header>  
<p>  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, ipsam, sunt, eius esse perferendis quaerat nesciunt assumenda odit blanditiis animi magnam tempora libero nam modi recusandae porro temporibus! Quisquam, voluptates?  
<br/>  
<br />  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, voluptate, dicta, 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 amet, consectetur adipisicing elit. Inventore, blanditiis, 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 amet, consectetur adipisicing elit. Quos, magni, 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;  
} 
html,body,#wrap,#main-wrap{  
width: 100%;  
height: 100%;  
} 
body{  
background-color: #222;  
font-family: 'Lato', Helvetica, 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-icon, #nav-icon:after,#nav-icon:before{ 
content: "";  
position: absolute;  
background: #333;  
width: 20px;  
height: 3px;  
left: 14px;  
top: 50%;  
cursor: pointer;  
} 
#nav-icon:after,#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'),  
main=document.getElementById('main-wrap'),  
navIcon=document.getElementById('nav-icon');  
//Events 
nav.addEventListener('mouseover',activate);  
navIcon.addEventListener('mouseover',activate);  
nav.addEventListener('mouseout',inActivate);  
//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.............

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.