#d3 {/*看3d的窗口*/
    -wbkit- perspective: 800px;
    -moz- perspective: 800px;
    -o- perspective: 800px;
    perspective: 800px;/*3d物体离屏幕的距离*/
    -wbkit- perspective-origin: 50% 50%;
    -moz- perspective-origin: 50% 50%;
    -o- perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;/*人看屏幕的位置，这里是正中央*/
    
    overflow: hidden;
}
#pages
{
    width: 400px;
    height: 400px;
    margin: 0px auto;
    transform-style: preserve-3d;/*是设置子元素的3d*/
    -webkit-transform-style: preserve-3d ;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    position: relative;
    
}
.page
{
    width: 360px;
    height: 360px;
    padding: 20px;
    background-color: black;
    color: #FFF;
    font-weight: bold;
    line-height: 360px;
    font-size: 360px;
    text-align: center;
    position: absolute;
}
#page2,#page3,#page4,#page5,#page6
{
    transform-origin: bottom;/*最底部沿着x轴旋转*/
   transition:transform  1s linear;
    transform: rotateX(90deg);
}
#page1
{
    transform-origin: bottom;
    transition:transform 1s linear;
}
#op
{
    text-align: center;
    margin: 40px auto;
}
#op a
{
    text-decoration: none;
    color: black;
}
input[type="range"]
{
    width: 800px;
    margin: 0 auto;
}
#disp
{
    width: 800px;
    margin: 0 auto;
}