Techumber
Home Blog Work

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. 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 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…