一个由jQuery和CSS3转换和转换组成的全屏3D立方体页面滑块。它具有奇特的页面滑块效果，在页面之间平滑过渡，同时它们在3D空间中相互重叠

如何使用它:

1.为页面滑块创建页面（内容部分）。

<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.创建一个页眉导航，使您可以在这些页面中导航。

<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.将以下CSS片段复制并粘贴到您的页面中。

/* 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.在文档末尾加载最新的jQuery库。

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

5.激活三维立方体页面滑块。

(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);

预览截图

jQuery和CSS3 3D多维数据集页面滑块