這是一款效果使用jQuery和CSS3制作的傾斜頁面打開側邊欄菜單UI界面設計效果。這個效果中，使用者點選頁面上的漢堡包按鈕時，整個頁面會向右傾斜一些角度，隐藏在左邊的側邊欄被顯示出來，整體效果非常炫酷。
制作方法
HTML結構
整個側邊欄使用一個div.paper-back作為包裹元素，裡面是一個元素包裹一組菜單項元素。其中div.close是關閉按鈕。
Home
About Us
Our Work
Contact
頁面的内容部分使用嵌套
的HTML結構。div.hamburger是漢堡包圖示。每一個頁面内容塊使用一個元素來制作。
...
...
...
CSS樣式
側邊欄導航菜單的樣式隻是簡單的将它固定定位定位，它的實際大小為整個視口的大小。
#paper-back {
width: 100%;
height: 100vh;
background-color: #243040;
position: fixed;
top: 0;
left: 0;
font-size: 33px;
}
#paper-back nav {
padding: 120px 34px;
}
#paper-back nav a {
display: block;
margin-bottom: 25px;
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
}
内容部分的包裹元素div#paper-window的大小也是整個視口的大小，超出水準方向的部分被隐藏，并且定位方式為相對定位。
#paper-window {
height: 100vh;
width: 100vw;
position: relative;
overflow-x: hidden;
overflow-y: scroll;
z-index: 2;
}
實際用于制作頁面傾斜效果的元素是div#paper-front。它設定為相對定位，轉換操作的中心原點被設定在center 70%位置。
#paper-front {
pointer-events: auto;
position: relative;
z-index: 3;
background-color: white;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
-webkit-transform-origin: center 70%;
-ms-transform-origin: center 70%;
transform-origin: center 70%;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
當頁面處于傾斜狀态時，div#paper-front元素被動态添加class tilt，這種狀态下，它繞設定好的原點旋轉10度，超出的部分會被隐藏。
#paper-window.tilt {
overflow: hidden;
pointer-events: none;
}
#paper-window.tilt #paper-front {
-webkit-transform: rotate(10deg) translateZ(0);
transform: rotate(10deg) translateZ(0);
}
具體jQuery實作代碼非常簡單，請參考下載下傳檔案。