jQuery和CSS3炫酷3D翻转侧边栏特效

这是一款jQuery和CSS3炫酷3D翻转侧边栏特效。该侧边栏特效中，当用户点击了触发按钮之后，整个页面会3D翻转一定的角度，同时显示侧边栏，效果非常炫酷。

使用方法

HTML结构

侧边栏的HTML结构如下：

<nav class="menu-activea">
  <h1>打开侧边栏</h1>
  <ul>
    <li>首页</li>
    <li>栏目一</li>
    <li>联系我们</li>
    <li>关于我们</li>
  </ul>
</nav>
                

作为打开侧边栏时，进行3D翻转的主体内容的HTML结构如下：

<main>
  <section>
    <!--这里放置你的页面内容--&t;
  </section>
</main>                  
                

CSS样式

该jQuery和CSS3 3D翻转侧边栏的主要CSS样式如下：

nav, main {
  transition: -webkit-transform 150ms ease-out;
  transition: transform 150ms ease-out;
  transition: transform 150ms ease-out, -webkit-transform 150ms ease-out;
}

nav {
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 16em;
  background-color: #353441;
  -webkit-transform: translateX(-16em);
  transform: translateX(-16em);
}

nav.menu-active {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

nav.menu-hover {
  -webkit-transform: translateX(-15em);
  transform: translateX(-15em);
}

nav h1 {
  z-index: 100;
  display: block;
  position: absolute;
  top: 0;
  right: -60px;
  height: 60px;
  width: 60px;
  line-height: 60px;
  font-size: .8em;
  font-weight: 800;
  letter-spacing: 1px;
  color: #9DC6D1;
  text-transform: uppercase;
  text-align: center;
  background-color: #353441;
  cursor: pointer;
}

nav h1:hover {
  color: #353441;
  background: #fff;
}

nav ul {
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  padding: 0 1em;
  width: 100%;
  height: 60px;
  color: #9DC6D1;
  line-height: 60px;
  background-color: #353441;
}

nav li:nth-of-type(2n) { background-color: #3a3947; }

nav li:hover { background: #fff; }

main {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #9DC6D1;
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}

main:after {
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(33, 33, 45, 0.5));
  visibility: hidden;
  opacity: 0;
  transition: opacity 150ms ease-out, visibility 0s 150ms;
}

main.menu-active {
  border-radius: .001px;
  -webkit-transform: translateX(16em) rotateY(15deg);
  transform: translateX(16em) rotateY(15deg);
}

main.menu-active:after {
  visibility: visible;
  opacity: 1;
  transition: opacity 150ms ease-out, visibility 0s;
}

main.menu-hover {
  border-radius: .001px;
  -webkit-transform: translateX(1em) rotateY(1deg);
  transform: translateX(1em) rotateY(1deg);
}

main section {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  padding: 1em 4em;
  max-width: 680px;
  overflow: auto;
  background-color: rgba(255, 255, 255, 0.5);
}
                

JavaScript

最后通过jquery代码来控制侧边栏的隐藏和显示。

(function() {

  var nav = $('nav'),
    menu = $('nav h1'),
    main = $('main'),
    open = false,
    hover = false;

  menu.on('click', function() {
    open = !open ? true : false;
    nav.toggleClass('menu-active');
    main.toggleClass('menu-active');
    nav.removeClass('menu-hover');
    main.removeClass('menu-hover');
    console.log(open);
  });
  menu.hover( 
    function() {
      if (!open) {
        nav.addClass('menu-hover');
        main.addClass('menu-hover');
      }
    }, function() {
      nav.removeClass('menu-hover');
      main.removeClass('menu-hover');
    }
  );

})();                  
                

该jQuery和CSS3 3D翻转侧边栏特效的codepen地址为：https://codepen.io/jscottsmith/pen/KppGrE