#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;
}