Amazing Side Page Navigation With 3D Page Flip Effect Using CSS3
Published on December 18, 2013
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.
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 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…