翻页效果显示当前时间

<!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. Java中的异常处理从概念到实例

    1.概念 采用新的异常处理机制 在以往的程序开发过程中,经常采用返回值进行处理.例如,在编写一个方法,可以返回一个状态代码,调用者根据状态代码判定出错与否.若状态代码表示一个错误,则调用这进行相应的处 ...

  2. vim正则表达式的替换变量

    在正规表达式中使用 \( 和 \) 符号括起正规表达式,即可在后面使用\1.\2 等变量来访问 \( 和 \) 中的内容. 例如有下列英汉对照文本: adapter 适配器address 地址alge ...

  3. java设计模式1--单例模式

    1:单例模式简介 单例模式是一种常用的软件设计模式,它确保某个类只有一个实例,而且自行实例化并向整个系统提供唯一的实例.总而言之就是在系统中只会存在一个对象,其中的数据是共享的 特点: 单例类只能有一 ...

  4. 精通SpringBoot--分页查询功能的实现

    本文将介绍如何实现分页查询功能,推荐使用github的pagehelper插件实现(事实上大家基本都是这么干的),但本文的实现方式和大多数不同,废话少说,现在就带着大家看看区别在哪里.先看pom.xm ...

  5. python学习笔记(四):生成器、内置函数、json

    一.生成器 生成器是什么?其实和list差不多,只不过list生成的时候数据已经在内存里面了,而生成器中生成的数据是当被调用时才生成呢,这样就节省了内存空间. 1. 列表生成式,在第二篇博客里面我写了 ...

  6. 4、python中的布尔值和None

    一.布尔值 1.布尔值只有两个:True.Flase,表示python语句的真与假: 2.在python早期的版本,布尔值用1和0表示. 二.None 1.None表示虚无,什么也没有: 2.千万不要 ...

  7. 笔记-python-内存管理

    笔记-python-内存管理 1.      内存使用 1.1.    对象的内存使用 a = 1 1是一个对象,a是引用,指向1. >>> id(a) 1951821280 这个数 ...

  8. Git-Git基本操作

    先来合个影 马上就要和之前实践遗留的数据告别了,告别之前是不是要留个影呢?在Git里,"留影"用的命令叫做tag,更加专业的术语叫做"里程碑"(打tag,或打标 ...

  9. 修改python新建文件时的模板

  10. Docker与CTF

    Docker与CTF 主要是用来搭建环境,漏洞环境,CTF比赛题目复现. docker你可以把它理解为一个vmware. iamges:vmware需要的iso镜像 container:vmware运 ...