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 >
<!--hours-->
<div >
<div >
<div class="page" >ready</div>
<div class="page" >go</div>
</div>
</div>
<!--minutes-->
<div >
<div >
<div class="page" >ready</div>
<div class="page" >go</div>
</div>
</div>
<!--seconds-->
<div >
<div >
<div class="page" >ready</div>
<div class="page" >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" >;
$('#pagegroup').append(newDiv);
// 分
var newDivm = '<div class="page" >;
$('#pagegroup-m').append(newDivm);
// 时
var newDivh = '<div class="page" >;
$('#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;
}