翻页效果php源码,JavaScript中transform实现数字翻页效果的代码分享（图）

Myth丶恋晨 2023-01-17 03:23 172阅读 0赞

本文主要介绍JavaScript中利用transform实现数字翻页效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧

效果图：

![70fec27fabc6bd60f902ad1297894836.png][]

图(1)初始图

![031423111d3e4dd09d039841b6516327.png][]

图(2)翻页过程

![37506f2011dd24c078f0d1b4348da34e.png][]

图(3)翻页结果

代码如下：

transition

\#container\{ width:500px; height:500px; margin:20px auto; background:\#ff0000;

\-webkit-transiton:background 2s linear,width 2s,height 2s;

\-moz-transition:background 2s,width 2s,height 2s;

\-o-transition:background 2s,width 2s,height 2s;

\-ms-transition:background 2s,width 2s,height 2s;

transition:background 2s,width 2s,height 2s;

\#container:hover\{ background: \#00ff00;width:200px;height: 200px;\}

\#my3dspace\{

\-webkit-perspective:800;

\-webkit-perspective-origin:50% 50%;

overflow: hidden;

\#pagegroup\{

width: 400px;

height: 400px;

margin: 0 auto;

\-webkit-transform-style:preserve-3d;

position: relative;

.page\{

width: 360px;

height: 360px;

padding: 20px;

background-color: black;

color: white;

font-size: 360px;

font-weight: blod;

line-height: 360px;

text-align: center;

position: absolute;

\#page1\{

\-webkit-transform-origin:top;

transform-origin:top;

\-webkit-transition:-webkit-transform 1s linear;

transition:transform 1s linear;

\#page2,\#page3,\#page4,\#page5,\#page6\{

\-webkit-transform-origin:top;

transform-origin:top;

\-webkit-transition:-webkit-transform 1s linear;

transition:transform 1s linear;

\-webkit-transform:rotateX(-90deg);

transform:rotateX(-90deg);

\#op\{

text-align: center;

margin: 40px auto;

var curIndex = 1;

function next()\{

if(curIndex==6)

return;

var curPage = document.getElementById("page"+curIndex);

curPage.style.webkitTransform = "rotateX(90deg)";

curPage.style.transform = "rotateX(90deg)";

curIndex ++;

var nextPage = document.getElementById("page"+curIndex);

nextPage.style.webkitTransform="rotateX(0deg)";

nextPage.style.transform="rotateX(0deg)";

function prev()\{

if(curIndex==1)

return;

var curPage =document.getElementById("page"+curIndex);

curPage.style.webkitTransform="rotateX(-90deg)";

curPage.style.transform="rotateX(-90deg)";

curIndex --;

var prevPage = document.getElementById("page"+curIndex);

prevPage.style.webkitTransform="rotateX(0deg)";

prevPage.style.transform="rotateX(0deg)";

[70fec27fabc6bd60f902ad1297894836.png]: /images/20221022/868d3f40103c4703a15e79e9025cb625.png
[031423111d3e4dd09d039841b6516327.png]: /images/20221022/9c5e225020f644d8a8aaeb41c7293f08.png
[37506f2011dd24c078f0d1b4348da34e.png]: /images/20221022/3eeefb8f50314f12be68b78dee783b50.png