创意旋转式打开隐藏侧边栏UI界面设计

这是一款效果非常炫酷的创意旋转式打开隐藏侧边栏UI界面设计。该侧边栏设计中，当用户点击侧边栏按钮的时候，整个页面会旋转一个角度，然后隐藏在页面下的侧边栏会被显示出来，效果非常的酷。

使用方法

HTML结构

该侧边栏特效的HTML结构如下：.menu_toggle是侧边栏打开按钮，.menu_items是侧边栏菜单，main.content是页面内容。

<div class="page">
    <span class="menu_toggle">
      <i class="menu_open fa fa-bars fa-lg"></i>
      <i class="menu_close fa fa-times fa-lg"></i>
    </span>
    <ul class="menu_items">
      <li><a href="#"><i class="icon fa fa-signal fa-2x"></i> Moar</a></li>
      <li><a href="#"><i class="icon fa fa-coffee fa-2x"></i> Coffee</a></li>
      <li><a href="#"><i class="icon fa fa-heart fa-2x"></i> Please</a></li>
    </ul>
    <main class="content">
      <div class="content_inner">
        <h1>...</h1>
        <p>...</p>
      </div>
    </main>
</div>         
              

CSS样式

在CSS样式中，当用户点击了打开侧边栏按钮的时候，页面朱内容元素.content被添加了class .shazam，这时该元素被旋转了-30度，打开按钮被旋转了-20度。菜单的列表项开始时是被移动到屏幕之外的，这时被移动回原来的位置，并设置了每个列表项的动画延迟时间。这一系列的设置组成了旋转打开侧边栏的效果。

.shazam .content {
  -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
.shazam .menu_open {
  -webkit-transform: rotate(-20deg);
      -ms-transform: rotate(-20deg);
          transform: rotate(-20deg);
}
.shazam .menu_close {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
}
.shazam .menu_items li {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: -webkit-transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition: transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.shazam .menu_items li:nth-child(2) {
  -webkit-transition-delay: .47s;
          transition-delay: .47s;
}
.shazam .menu_items li:nth-child(3) {
  -webkit-transition-delay: .48s;
          transition-delay: .48s;
}             
              

Javascript

在jQuery代码中，主要为点击按钮添加和移除相应的class。

var $page = $('.page');
$('.menu_toggle').on('click', function () {
    $page.toggleClass('shazam');
});
$('.content').on('click', function () {
    $page.removeClass('shazam');
});