效果图：

图(1)初始图

图(2)翻页过程

图(3)翻页结果

代码如下：

！doctype html html lang=' en ' head meta charset=' UTF-8 ' title transition/title style # container { width :500 px；高度：500 px余量：20px汽车；背景# ff 0000-网络套件-transit :背景2s线性，宽度2s，高度2s；-moz-transit :背景2s，宽度2s，高度2s；-o-转换：背景2s，宽度2s，高度2s；-ms-transit :背景2s，宽度2s，高度2s；过渡：背景2s，宽度2s，高度2s；} #容器：悬停{背景： # 00ff 00宽度宽度：200像素高度： 200像素；} #我的3d空间{-WebKit-透视图：800；-网络套件-透视图-产地：50% 50%；飞越：隐藏；} # pagegroup { width: 400px高度： 400像素；margin: 0自动网页套件-转换-样式： preserve-3d；相对位置：} .页面{ width : 360 pxheart : 360 pxpadding : 20px背景-颜色：黑色；颜色：白色；font-size : 360 px字体粗细： blod线高： 360 px文本对齐：中心；绝对位置：} #第1页{-web kit-transform-origin : top；变换原点：顶部；-网络套件-transit :-网络套件-transit 1s线性；transition:transform 1s线性；} #第2页、#第3页、#第四页、#第5页、#第6页{-web kit-transform-origin : top；变换原点：顶部；-网络套件-transit :-网络套件-transit 1s线性；transition:transform 1s线性；-web套件-transform : rotatex(-90)；transform : rotatex(-90)；} # op { text-align : center余量： 40px自动；}/style/head body div id=' my 3d space ' div id=' page group ' div class=' page ' id=' page 1 ' 1/div div class=' page ' id=' page 2 ' 2/div class=' page ' id=' page 3 ' 3/div class=' page ' id=' page 4 ' 4/div class=' page ' id=' page 5 ' 5/div class=' page ' id=' page 6 ' 6/div/div/div id=' op ' a href='函数next(){ if(curIndex==6)返回； var curPage=文档。getelementbyid(' page ' Curindex)；寇奇。风格。webkittransform=' rotateX(90)'；寇奇。风格。transform=' rotateX(90)'；下一页=文档。getelementbyid(' page ' Curindex)；下一页。风格。webkittransform=' rotateX(0)'；下一页风格。transform=' Rotatex(0)'；}函数prev(){ if(curIndex==1)返回；var curPage=文档。getelementbyid(' page ' Curindex)；寇奇。风格。webkittransform=' rotateX(-90)'；寇奇。风格。transform=' Rotatex(-90)；curIndex-；var prev page=文档。getelementbyid(' page ' Curindex)；上一页。风格。webkittransform=' rotateX(0)'；上一页。风格。transform=' Rotatex(0)'；}/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！