Javaｓｃｒｉｐｔ中数字页面效果的转换实现

设计素描 uff1a

图（1）初始图

图（2）翻页过程

图（3）翻页结果

代码如下：

过渡

#容器{宽度：500px；身高：500px；保证金：20px汽车；背景：# FF0000；
WebKit的转型：背景2s线性，宽度2S，高度2s；
-moz转型：背景2S，宽度2S，高度2s；
- O转换：背景2S，宽度2S，高度2s；
- MS转换：背景2S，宽度2S，高度2S；
转换：背景2S，宽度2S，高度2S；
}
#容器：悬停{背景：# 00ff00；宽度：200px；高度：200px；}
# my3dspace {
WebKit的角度：800；
WebKit的视角来源：50% 50%；
溢出：隐藏；
}
# pagegroup {
宽度：400px；
身高：400px；
保证金：0汽车；
WebKit的变换风格：preserve-3d；
职位：相对；
}
{。页
宽度：360px；
身高：360px；
填料：20px；
背景颜色：黑色；
颜色：白色；
字体大小：360px；
字体重量：血液；
行高：360px；
文本对齐：中心；
位置：绝对；
}
# page1 {
WebKit的变换起源：顶；
转换原点：顶部；
WebKit的过渡：WebKit的1s线性变换；
转换：转换1s线性；
}
#第2页，#第三页，#第四页，#第5页，#第6页{
WebKit的变换起源：顶；
转换原点：顶部；
WebKit的过渡：WebKit的1s线性变换；
转换：转换1s线性；
WebKit的变换：rotatex（- 90度）；
变换：rotatex（- 90度）；
}
# OP {
文本对齐：中心；
保证金：40px汽车；
}
一
二
三
四
五
六
下一个
沪指
无功curindex = 1；
函数下一步（）{
如果（curindex = = 6）
返回；
无功curpage = document.getelementbyid（页+ curindex）；
curpage.style.webkittransform =rotatex（90度）；
curpage.style.transform =rotatex（90度）；
curindex + +；
VaR做= document.getelementbyid（页+ curindex）；
nextpage。风格。webkittransform =rotatex（0度）；
nextpage。风格。变换=rotatex（0度）；
}
功能上（）{
如果（curindex = = 1）
返回；
无功curpage = document.getelementbyid（页+ curindex）；
curpage。风格。webkittransform =rotatex（- 90度）；
curpage。风格。变换=rotatex（- 90度）；
curindex—；
VaR的前一页= document.getelementbyid（页+ curindex）；
前一页。风格。webkittransform =rotatex（0度）；
前一页。风格。变换=rotatex（0度）；
}

以上是本文的全部内容，希望本文的内容能给大家的学习或工作带来一定的帮助，同时也希望能给予更多的支持！