这是一款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
