css3挂历翻页效果

DOCTYPE html>
html>

    head>
        meta charset="UTF-8">
        title>Documenttitle>
        link rel="stylesheet" type="text/css" href="css/test.css" />

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

    body>
        div id="wrapbox">
            
            div id="my3dspace-h">
                div id="pagegroup-h">
                    div class="page" id="pageh1">readydiv>
                    div class="page" id="pageh2">godiv>

                div>
            div>
            
            div id="my3dspace-m">
                div id="pagegroup-m">
                    div class="page" id="pagem1">readydiv>
                    div class="page" id="pagem2">godiv>

                div>
            div>
            
            div id="my3dspace">
                div id="pagegroup">
                    div class="page" id="page1">readydiv>
                    div class="page" id="page2">godiv>

                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 = ‘

‘ + s + ‘
‘;
                    $(‘#pagegroup‘).append(newDiv);

                    //                    分
                    var newDivm = ‘

‘ + m + ‘
‘;
                    $(‘#pagegroup-m‘).append(newDivm);
                    //                    时
                    var newDivh = ‘

‘ + h + ‘
‘;
                    $(‘#pagegroup-h‘).append(newDivh);
                    numh++;
                    numm++;
                    num++;
                }, 1000);
                //翻页
                clearInterval();
                setInterval(function() {
                    next();
                    nextm()
                    nexth();

                }, 1000);

            })
        script>

    body>

html>

#wrapbox {
  width: 100%;
  padding-left: 0.4rem;
}
#wrapbox div {
  display: inline-block;
  float: left;
  margin: 0.2rem;
}
/*hours*/
#my3dspace-h {
  -webkit-perspective: 400;
  -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: 400;
  -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: 400;
  /*-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;
}