翻页效果显示当前时间

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

        <link rel="stylesheet" type="text/css" href="css/test.css" />

        <script type="text/javascript" src="js/jquery.min.js">

        </script>

        <!--设置默认字符25px-->

        <script type="text/javascript" src="js/common.js">

        </script>

    </head>

    <body>

        <div id="wrapbox">

            <!--hours-->

            <div id="my3dspace-h">

                <div id="pagegroup-h">

                    <div class="page" id="pageh1">ready</div>

                    <div class="page" id="pageh2">go</div>

                </div>

            </div>

            <!--minutes-->

            <div id="my3dspace-m">

                <div id="pagegroup-m">

                    <div class="page" id="pagem1">ready</div>

                    <div class="page" id="pagem2">go</div>

                </div>

            </div>

            <!--seconds-->

            <div id="my3dspace">

                <div id="pagegroup">

                    <div class="page" id="page1">ready</div>

                    <div class="page" id="page2">go</div>

                </div>

            </div>

        </div>

        <script>

            var curIndex = 1;

            //向后翻页

            function next() {

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

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

                curIndex++;

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

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

            }

            //翻页分

            var curIndexm = 1;

            function nextm() {

                var curPagem = document.getElementById('pagem' + curIndexm);

                //                console.log(curPagem)

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

                curIndexm++;

                var nextPagem = document.getElementById('pagem' + curIndexm);

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

            }

            //翻页小时

            var curIndexh = 1;

            function nexth() {

                var curPageh = document.getElementById('pageh' + curIndexh);

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

                curIndexh++;

                var nextPageh = document.getElementById('pageh' + curIndexh);

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

            }

        </script>

        <script type="text/javascript">

            $(function() {

                var num = 3;

                var numm = 3;

                var numh = 3;

                var s;

                var m;

                var h;

                //                设置时间

                setInterval(function() {

                    var myDate = new Date();

                    s = myDate.getSeconds();

                    m = myDate.getMinutes();

                    h = myDate.getHours();

                }, 1000);

                //生成页面

                clearInterval();

                var timer = setInterval(function() {

                    var newDiv = '<div class="page" id="page' + num + '">' + s + '</div>';

                    $('#pagegroup').append(newDiv);

                    //                    分

                    var newDivm = '<div class="page" id="pagem' + numm + '">' + m + '</div>';

                    $('#pagegroup-m').append(newDivm);

                    //                    时

                    var newDivh = '<div class="page" id="pageh' + numh + '">' + h + '</div>';

                    $('#pagegroup-h').append(newDivh);

                    numh++;

                    numm++;

                    num++;

                }, 1000);

                //翻页

                clearInterval();

                setInterval(function() {

                    next();

                    nextm()

                    nexth();

                }, 1000);

            })

        </script>

    </body>

</html>

css

#wrapbox {

  width: 100%;

  padding-left: 0.4rem;

}

#wrapbox div {

  display: inline-block;

  float: left;

  margin: 0.2rem;

}

/*hours*/

#my3dspace-h {

  -webkit-perspective:;

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

  overflow: hidden;

}

#pagegroup-h {

  width: 200px;

  height: 200px;

  /*margin: 0 auto;*/

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

  position: relative;

}

/*minutes*/

#my3dspace-m {

  -webkit-perspective:;

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

  overflow: hidden;

}

#pagegroup-m {

  width: 200px;

  height: 200px;

  /*margin: 0 auto;*/

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

  position: relative;

}

/*seconds*/

#my3dspace {

  -webkit-perspective:;

  /*-webkit-perspective-origin: 50% 50%;*/

  overflow: hidden;

}

#pagegroup {

  width: 200px;

  height: 200px;

  margin: 0 auto;

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

  position: relative;

}

.page {

  width: 200px;

  height: 200px;

  /*padding: 10px;*/

  background-color: #0070CD;

  color: #fff;

  font-size: 100px;

  font-weight: bold;

  line-height: 200px;

  text-align: center;

  position: absolute;

  -webkit-transform-origin: bottom;

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

  -webkit-transform: rotateX(90deg);

}

#page1 {

  -webkit-transform-origin: bottom;

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

}

css3上下翻页效果的更多相关文章

  1. css3实现卷页效果http://jingyan.baidu.com/article/73c3ce2806aef9e50343d93a.html

    css3实现卷页效果 | 浏览:31 | 更新:2015-01-08 13:30 1 2 3 4 5 6 7 分步阅读 百度经验:jingyan.baidu.com 页面上经常会看到鼠标移动上去,对象 ...

  2. rlwrap-0.37.tar.gz实现sqlplus上下翻页

    1.上传rlwrap-0.37.tar.gz到linux 2.解压rlwrap-0.37.tar.gz [root@node1 mnt]# tar zxvf rlwrap-0.37.tar.gz [r ...

  3. linux中使sqlplus能够上下翻页

    安装包链接:https://pan.baidu.com/s/1WsQTeEQClM88aEqIvNi2ag 提取码:s241  rlwrap-0.37-1.el6.x86_64.rpm 和 rlwra ...

  4. Oracle管理监控之rlwrap-0.37.tar.gz实现sqlplus上下翻页

    1.上传rlwrap-0.37.tar.gz到linux 2.解压rlwrap-0.37.tar.gz [root@node1 mnt]# tar zxvf rlwrap-0.37.tar.gz [r ...

  5. linux vi编辑器中,如何通过快捷键上下翻页?

    需求说明: 之前在vi的时候,如果想看下一页,就直接按住 ↓ 这个箭头一直翻,现在觉得有些麻烦, 就找了下上,下翻页的快捷方式.在此记录下. 记录: 1.向下翻页快捷键(下一页):Ctrl + f 2 ...

  6. 采用cocos2d－x lua 的listview 实现pageview的翻页效果之上下翻页效果

    --翻页滚动效果local function fnScrollViewScrolling( sender,eventType)    -- body    if eventType == 10 the ...

  7. rlwrap插件,实现sqlplus上下翻页

    oracle在Linux下,sqlplus中不能上下翻,最主要我经常打错字!嘿嘿 01.下载 RPM  :http://rpmfind.net/linux/rpm2html/search.php?qu ...

  8. linux less-分屏上下翻页浏览文件内容

    博主推荐:获取更多 linux文件内容查看命令 收藏:linux命令大全 less命令的作用与more十分相似,都可以用来浏览文字档案的内容,不同的是less命令允许用户向前或向后浏览文件,而more ...

  9. vue-pdf结合alloyfinger手势缩放旋转上下翻页pdf文件

    1. demo线上链接 vuepdf在线demo 2. demo图: 3. 话不多说,上代码: 安装vue-pdf插件: npm i vue-pdf 安装vue-pdf报错catch的可以看我这篇文章 ...

随机推荐

  1. Android驱动开发读书笔记七

    第七章 (一)创建设备文件 1.使用cdev_init函数初始化cdec 描述设备文件需要一个cdev结构体,代码如下: struct cdev{ struct kobject kobj; struc ...

  2. 高级字符驱动之堵塞与非堵塞IO

    /** *此实例涉及到线程的挂起与竞态,字符IO的堵塞与非堵塞 */ struct scull_pipe { wait_queue_head_t inp, outp; char *buffer, *e ...

  3. 汇编 if else 例子

    .text .global  _start _start: mov r1,#1 mov r2,#2 cmp r1, r2 bgt  branch1 add  r3,r1,r2 b  end branc ...

  4. 小象学院Python数据分析第二期【升级版】

    点击了解更多Python课程>>> 小象学院Python数据分析第二期[升级版] 主讲老师: 梁斌 资深算法工程师 查尔斯特大学(Charles Sturt University)计 ...

  5. 与SVN相关的程序的调试问题【转】

    解决eclipse中出现Resource is out of sync with the file system问题. 分析:有时候因为时间紧迫的原因,所以就没去管它,今天再次遇到它,实在看着不爽,所 ...

  6. LCS及方案数（DP）

    Description 对于一个序列

  7. TI C6000优化手册——让代码看起来像钉子

    DSP芯片的出现,是为了解决大量的数字运算问题.通过集成专用的加法器.乘法器.地址产生器.复杂逻辑等硬件单元,DSP能实现比普通单片机更快速的数字运算,使处理器更适用于实时性高.复杂度强的处理场合.也 ...

  8. 【File】文件操作（初识文件操作一）

    一,初识文件流 看到标题就知道接下来的所有操作对象都是面对文件进行的.那么问题来了.在java中目录是不是也属于文件呢?答案是yes.既然目录也属于文件,那么对于目录跟文件的区分就显现出来了.在接下来 ...

  9. poj2631 Roads in the North（求树的直径）

    Roads in the North Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2941   Accepted: 144 ...

  10. 剖析微软Hyper-V的最佳部署方式

    剖析微软Hyper-V的最佳部署方式 2014-04-24 10:53 布加迪编译 51CTO.com 字号:T | T 微软Hyper-V有两种不同的版本.既可以安装到Windows Server的 ...