HTML5仿苹果手机的面板合拢折叠效果

       这是一个HTML5折叠菜单，但更像是一个折叠面板，仿苹果手机的passbook应用中的代码例子，请在火狐或chrome下浏览。不知道有没有听说过手机琴菜单，觉得这一个从形式上来说，是挺像的。

passbook仿苹果手机的面板合拢折叠效果-html5特效

.pocket{
width:300px;
height:460px;
padding: 10px;
overflow: hidden;
float: left;
border: 1px solid #EDEDED;
margin: 4px;
border-radius: 8px;
box-shadow:0 -5px 30px rgba(0,0,0,0.2) inset;
}
.passcard {
float: left;
width:300px;
height:380px;
color: #878787;
text-align: center;
padding-top: 5px;
margin-bottom: -320px;
cursor: pointer;
}
.starbucks{
background:url(/jscss/demoimg/201307/starbucks.png) no-repeat;
}
.airport{
background:url(/jscss/demoimg/201307/airport.png) no-repeat;
}
.paper{
border: 1px solid #EDEDED;
color: #A8A8A8;
text-align: center;
font:26px 'Segoe UI Light',Helvetica,Arial,'Sans-Serif';
background:-webkit-gradient(linear,left top,left bottom,color-stop(50%,rgba(229, 249, 249, 1)),color-stop(100%,rgba(240, 240, 240, 1)));
background: -webkit-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
background: -moz-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
background: -o-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
background: -ms-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
background: linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
background: -webkit-linear-gradient(top,rgba(255, 255, 255, 0.05) 0%,rgba(255, 255, 255, 0.05) 20%,rgba(0, 0, 0, 0.05) 100%);
border-radius:14px;
box-shadow:-2px -1px 2px rgba(0,0,0,0.1);
}
.pod {
background: none repeat scroll 0 0 white;
cursor: pointer;
height: 160px;
width: 300px;
border: 1px solid #CDCDCD;
border-radius: 6px;
float: left;
margin: 3px 15px 15px 3px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2),0 -4px 0 #E8E8E8 inset;
}

passcard 1

passcard 2

passcard 3