翻页效果显示当前时间

<!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. React后台管理系统-商品列表搜索框listSearch组件

    1.商品列表搜索框 2.搜索框页面的结构为 <div className="row search-wrap">               <div classN ...

  2. c++ 循环程序的作业，2017年10月10日作业题。

    作业1: 需求:输出一个由 * 符号所组成的矩形,要求每行有50个 * ,一共需要有60行.使用双重for循环完成. 作业2: 需求:输出一个由 * 符号所组成的三角形,要求第一行一个 * ,第二行 ...

  3. 两种方法实现text输入框中“请输入关键字”的提醒

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. html +css 登陆框中加用户图片，并设置登陆名不盖住图标

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 三十二、MySQL 导出数据

    MySQL 导出数据 MySQL中你可以使用SELECT...INTO OUTFILE语句来简单的导出数据到文本文件上. 使用 SELECT ... INTO OUTFILE 语句导出数据 以下实例中 ...

  6. 火狐IE event和target的兼容

    一.event对象 IE 中可以直接使用 window.event 对象,而 FF 中则不可以,解决方法之一如下: var theEvent = window.event || arguments.c ...

  7. [Wolfgang Mauerer] 深入linux 内核架构 第二章 进程管理与调度【未完】

     作为Linux开发爱好者,从事linux 开发有三年多时间.做过bsp移植,熟悉u-boot代码执行流程:看过几遍<linux 设备驱动程序开发>,分析过kernel启动流程,写过驱动, ...

  8. 利用Django提供的ModelForm增删改数据

    上一篇我们写了Django基于类如何增删改数据的方法,方法虽然简单,但新手可能对其原理不是很清楚,那么我们这次就用Django提供的ModelForm方法来实现增删改数据,这是一种基于现有模型的增删改 ...

  9. Python 频繁请求问题: [Errno 104] Connection reset by peer

    Table of Contents 1. 记遇到的一个问题:[Errno 104] Connection reset by peer 记遇到的一个问题:[Errno 104] Connection r ...

  10. 2 Model层 -定义模型

    1  ORM简介 MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库 ORM是“对象-关系-映射” ...