翻页效果显示当前时间

<!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. cookie 和 localStorage 、sessionStorage、 session不同

    1. cookie:存储大小4k 有时间限制,会跟在ajax的请求头上 2. localStorage: 存储大小5M 没有时间限制 3. sessionStorage: 临时会话存储 当浏览器关闭的 ...

  2. 微信小程序页面跳转绑定点击事件

    https://www.cnblogs.com/mrszhou/p/7931747.html

  3. 散列表的ASL计算

    题目: 已知关键字序列为{30,25,72,38,8,17,59},设散列表表长为15.散列函数是H(key)=key MOD 13,处理冲突的方法为二次探测法Hi= ( H(key) + di )m ...

  4. 入门学习Linux常用必会命令实例详解

    Linux提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作.文件存取.目录操作.进程管理.文件权限设定等.所以,在Linux系统上工作离不开使用系统提供的命令.要想真正理解Linux系统, ...

  5. 10.VUE学习之使用lodash库减少watch对后台请求的压力

    问题描述 使用watch监听库里word的值的变化,获取新值后,用oxios发送的ajax异步请求, 此时会多次发送请求,浪费服务器资料. 解决办法 使用lodash库里的_.debounce函数延缓 ...

  6. SpringBoot-Security-用户权限分配-项目搭建

    SpringBoot原则是约定优于配置,简化spring应用开发,去繁从简,产品级别的应用. SpringBoot有哪些优点1.快速创建独立运行的spring项目与主流框架集成 2.使用嵌入式的ser ...

  7. Python入门基础--变量与基本数据类型

    变量 什么是变量 变量就是变化的量,变就是变化,量用于衡量描述对象的状态 为什么要有变量 程序执行的本质就是一系列状态的变化,变是程序执行的直接体现,所以我们需要有一种机制能够反映或者说是保存下来程序 ...

  8. 单片机入门学习笔记5：STC下载器

    STC下载器主要集成了, 1.芯片识别,下载/编程 2.端口识别 3.串口助手 4.KEIL仿真设置 5.芯片选型 6.范例程序 (集成了定时器,串口等例程) 7.波特率计算器 8.定时器计算器 9. ...

  9. poj 23565-Find a multiple

    Find a multiple The input contains N natural (i.e. positive integer) numbers ( N <= 10000 ). Each ...

  10. TCP/IP网络编程之套接字类型与协议设置

    套接字与协议 如果相隔很远的两人要进行通话,必须先决定对话方式.如果一方使用电话,另一方也必须使用电话,而不是书信.可以说,电话就是两人对话的协议.协议是对话中使用的通信规则,扩展到计算机领域可整理为 ...