3D Cube Page Slider With jQuery And CSS3

A fullscreen 3D cube page slider made with jQuery and CSS3 transforms & transitions. It comes with a fancy page slider effect, smoothly transitioning between pages while they overlap each other in 3D space. 

How to use it:

1. Create pages (content sections) for the page slider.

<div id="wrap">
  <div class="cube">
    <section class="page active face front" id="home">
      <div class="act-table text-center">
        <div class="act-table-cell ver-middle">Home Page</div>
      </div>
    </section>
    <section class="page face back" id="portfolio">
      <div class="act-table text-center">
        <div class="act-table-cell ver-middle">Portfolio Page</div>
      </div>
    </section>
    <section class="page face top" id="about">
      <div class="act-table text-center">
        <div class="act-table-cell ver-middle">about Page</div>
      </div>
    </section>
    <section class="page face right" id="contact">
      <div class="act-table text-center">
        <div class="act-table-cell ver-middle">contact Page</div>
      </div>
    </section>
    <section class="page face bottom" id="blog">
      <div class="act-table text-center">
        <div class="act-table-cell ver-middle">blog Page</div>
      </div>
    </section>
    <section class="page face left" id="article">
      <div class="act-table text-center">
        <div class="act-table-cell ver-middle">article Page</div>
      </div>
    </section>
  </div>
</div>

2. Create a header navigation that allows you to navigate through those pages.

<header>
  <nav class="text-center">
    <ul class="inline-block">
      <li class="pull-left active"><a href="#" data-direction="front">Home</a></li>
      <li class="pull-left"><a href="#" data-direction="back">Portfolio</a></li>
      <li class="pull-left"><a href="#" data-direction="top">About</a></li>
      <li class="pull-left"><a href="#" data-direction="right">Contact</a></li>
      <div class="clearfix"></div>
    </ul>
  </nav>
</header>

3. Copy and paste the following CSS snippets into your page.

/* header nav styles */
header {
  position: fixed;
  top: 8px;
  left: 0;
  right: 0;
  z-index: 100;
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s
}

header.go-out {
  top: -150px
}

header nav ul {
  background-color: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px
}

header nav ul li {
  color: #fff
}

header nav ul li a {
  width: 100px;
  max-width: 150px;
  height: 32px;
  display: block;
  padding-top: 13px
}

header nav ul li.active a,
header nav ul li.active a:hover {
  background-color: rgba(255, 255, 255, 0.2)
}

header nav ul li:hover a {
  background-color: rgba(255, 255, 255, 0.1)
}

/* page styles */
.page {
  background-color: rgba(0, 0, 0, 0.2)
}

.page .act-table {
  width: 100%;
  height: 100%
}

.page .act-table .act-table-cell {
  font-size: 100px;
  font-weight: 500;
  color: #fff
}

.page.active {
  z-index: 50
}

#wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  transition: .8s;
  -webkit-transition: .8s;
  -moz-transition: .8s
}

#wrap.active {
  top: 10%;
  bottom: 10%;
  right: 10%;
  left: 10%
}

.cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s
}

.cube.reverse-back {
  transform: rotateX(180deg) rotateY(0deg) rotateZ(-180deg);
  -webkit-transform: rotateX(180deg) rotateY(0deg) rotateZ(-180deg);
  -moz-transform: rotateX(180deg) rotateY(0deg) rotateZ(-180deg)
}

.cube.reverse-back .back {
  transform: translateZ(-800px) rotateY(-180deg);
  -webkit-transform: translateZ(-800px) rotateY(-180deg);
  -moz-transform: translateZ(-800px) rotateY(-180deg)
}

.cube.reverse-left .left {
  transform: translateX(-800px) rotateY(-90deg);
  -webkit-transform: translateX(-800px) rotateY(-90deg);
  -moz-transform: translateX(-800px) rotateY(-90deg)
}

.cube.reverse-right {
  transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg);
  -webkit-transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg);
  -moz-transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg)
}

.cube.reverse-right .right {
  transform: translateX(800px) rotateY(90deg);
  -webkit-transform: translateX(800px) rotateY(90deg);
  -moz-transform: translateX(800px) rotateY(90deg)
}

.cube.reverse-top {
  transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  -webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  -moz-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg)
}

.cube.reverse-top .top {
  transform: translateY(-400px) rotateX(90deg);
  -webkit-transform: translateY(-400px) rotateX(90deg);
  -moz-transform: translateY(-400px) rotateX(90deg)
}

.cube.reverse-bottom .bottom {
  transform: translateY(400px) rotateX(-90deg);
  -webkit-transform: translateY(400px) rotateX(-90deg);
  -moz-transform: translateY(400px) rotateX(-90deg)
}

.face {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  color: #666;
  font-size: 18px;
  text-align: center;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5)
}

.front {
  background-color: #28aadc
}

.front.active {
  transform: translateZ(800px);
  -webkit-transform: translateZ(800px);
  -moz-transform: translateZ(800px)
}

.back {
  background-color: #ff3366
}

.back:not(.active) {
  transform: translateZ(-800px) rotateY(-180deg);
  -webkit-transform: translateZ(-800px) rotateY(-180deg);
  -moz-transform: translateZ(-800px) rotateY(-180deg)
}

.back .active {
  transform: translateZ(800px);
  -webkit-transform: translateZ(800px);
  -moz-transform: translateZ(800px)
}

.left:not(.active) {
  transform: translateX(-800px) rotateY(-90deg);
  -webkit-transform: translateX(-800px) rotateY(-90deg);
  -moz-transform: translateX(-800px) rotateY(-90deg)
}

.left .active {
  transform: translateZ(800px);
  -webkit-transform: translateZ(800px);
  -moz-transform: translateZ(800px)
}

.right {
  background-color: #000
}

.right:not(.active) {
  transform: translateX(800px) rotateY(90deg);
  -webkit-transform: translateX(800px) rotateY(90deg);
  -moz-transform: translateX(800px) rotateY(90deg)
}

.right .active {
  transform: translateZ(800px);
  -webkit-transform: translateZ(800px);
  -moz-transform: translateZ(800px)
}

.top {
  background-color: #FFAD33
}

.top:not(.active) {
  transform: translateY(-400px) rotateX(90deg);
  -webkit-transform: translateY(-400px) rotateX(90deg);
  -moz-transform: translateY(-400px) rotateX(90deg)
}

.top .active {
  transform: translateZ(800px);
  -webkit-transform: translateZ(800px);
  -moz-transform: translateZ(800px)
}

.bottom:not(.active) {
  transform: translateY(400px) rotateX(-90deg);
  -webkit-transform: translateY(400px) rotateX(-90deg);
  -moz-transform: translateY(400px) rotateX(-90deg)
}

.bottom .active {
  transform: translateZ(800px);
  -webkit-transform: translateZ(800px);
  -moz-transform: translateZ(800px)
}

4. Load the latest jQuery library at the end of the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

5. Activate the 3D cube page slider.

(function(document, window, $){
  $(document).ready(function(){
    var 
      windowWidth = $(window).width(),
      windowHeight = $(window).height(),
      $header = $('header');
    function headerAnchors(){
      var pageDirection = '';
      var thisElement;
      var timeout;
      $header.find('nav li a').click(function(event){
        event.preventDefault();
          $('.cube').removeClass('reverse-' + pageDirection);
        thisElement = $(this);
        pageDirection = thisElement.data('direction');
        reverseDirection = thisElement.data('reverse-direction');
        thisElement.parent().addClass('active').siblings().removeClass('active');
          $('.cube').addClass('reverse-' + pageDirection);

          $header.addClass('go-out');
        $('#wrap').addClass('active');
        clearTimeout(timeout);
        timeout = setTimeout(function(){
          $header.removeClass('go-out');
          $('#wrap').removeClass('active');
        }, 1000);
      });
    }headerAnchors();
    $(window).resize(function(){
      windowWidth = $(window).width();
      windowHeight = $(window).height();
    });
  });
})(document, window, jQuery);

---

This awesome jQuery plugin is developed by mahmoudzohdi. For more Advanced Usages, please check the demo page or visit the official website.