翻页效果显示当前时间

<!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. css代码

    #footr { background: #3e434a } #header #blogTitle { background: url("http://images.cnblogs.com/ ...

  2. 螺旋矩阵，两步进阶，从暴力到o(1)

    题目描述 一个 n 行 n 列的螺旋矩阵可由如下方法生成: 从矩阵的左上角(第 1 行第 1 列)出发,初始时向右移动:如果前方是未曾经过的格子,则继续前进,否则右转:重复上述操作直至经过矩阵中所有格 ...

  3. nginx下根据指定路由重定向

    前言: 最近在搭建vue后台,后端接口是PHP写的,线上构建好之后,需要请求其他域名下的接口,开发环境已经使用proxytable解决了接口问题,为了开发和生成的代码一致, 编译后的代码,放在ngin ...

  4. tp5依赖注入（自动实例化）：解决了像类中的方法传对象的问题

    app\index\Demo1.php namespace app\index\controller; /* 容器与依赖注入的原理 ----------------------------- 1.任何 ...

  5. vue.js 图片预览

    Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...

  6. Serializer序列器

    定义Serializer 1. 定义方法 Django REST framework中的Serializer使用类来定义,须继承自rest_framework.serializers.Serializ ...

  7. Gender Equality in the Workplace【职场上的性别平等】

    Gender Equality in the Workplace A new batch of young women - members of the so-called Millennial ge ...

  8. [Poj2761]Feed the dogs（主席树）

    Desciption 题意:求区间第K小(N<=100000) Solution 主席树模板题 Code #include <cstdio> #include <algorit ...

  9. python基础——18（面向对象2+异常处理）

    一.组合 自定义类的对象作为另一个类的属性. class Teacher: def __init__(self,name,age): self.name = name self.age = age t ...

  10. TCP的运输连接管理

    TCP的运输连接管理 TCP是面向连接的协议,有三个阶段:连接建立.数据传送 和 连接释放.运输连接的管理就是使运输连接的简历和释放都能正常地进行. 在TCP连接建立过程中要解决一下三个问题: 1.  ...