css3上下翻页效果
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
css3上下翻页效果翻页效果显⽰当前时间
<!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: 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; }。