<html>
<head>
<style?type="text/css">
#my3dspace{
overflow:hidden;
}
#pagegroup{
width:400px;
height:400px;
margin:0?auto;
-webkit-perspective-origin:?50%?50%;
-webkit-perspective:800;?
-webkit-transform-style:preserve-3d;
position:relative;
}
.page{
width:360px;
height:360px;
padding:20px;
background-color:black;
color:white;
font-weight:bold;
font-size:360px;
line-height:360px;
text-align:center;
position:absolute;
}
#page1{
-webkit-transform-origin:bottom;
-webkit-transition:-webkit-transform?1s?linear;
}
#page2,#page3,#page4,#page5,#page6{
-webkit-transform-origin:bottom;
-webkit-transition:-webkit-transform?1s?linear;
-webkit-transform:rotateX(90deg);
}
#op{
margin:0px?auto;
width:100px;
}
</style>
<script?type="text/javascript">
var?curIndex?=?1;
function?next(){
if(curIndex==6)
{
return;
}
var?curPage?=?document.getElementById("page"+curIndex);
curPage.style.webkitTransform?=?"rotateX(-90deg)";
curIndex++;
var?nextPage?=?document.getElementById("page"+curIndex);
nextPage.style.webkitTransform?=?"rotateX(0deg)";
}
function?pre(){
if(curIndex==1)
{
return;
}
var?curPage?=?document.getElementById("page"+curIndex);
curPage.style.webkitTransform?=?"rotateX(90deg)";
curIndex--;
var?nextPage?=?document.getElementById("page"+curIndex);
nextPage.style.webkitTransform?=?"rotateX(0deg)";
}
</script>
</head>
<body>
<div?id="my3dspace">
<div?id="pagegroup">
<div?class="page"?id="page1">1</div>
<div?class="page"?id="page2">2</div>
<div?class="page"?id="page3">3</div>
<div?class="page"?id="page4">4</div>
<div?class="page"?id="page5">5</div>
<div?class="page"?id="page6">6</div>
</div>
</div>
<div?id="op">
<a?href="javascript:next()">next</a> <a?href="javascript:pre()">pre</a>
</div>
</body>
</html>
2015-08-06
<!doctype html><head>
? ?<meta charset="utf-8">
? ?<title>CSS3 Animation</title>
? ?<meta name="description" content="CSS3 Animation">
? ?<meta name="author" content="Rex Rao">
? ?<link rel="stylesheet" href="css/style.css?v=1.0"></head><body class="home">
? ?<section id="main">
? ?<br>
? ?<br>
? ?<br>
? ?<br>
? ?<br>
? ? ? ?<div id="rotateDiv">
? ? ? ? ? ?<table class="table">
? ? ? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ? ? ?<th style="width:20%">
? ? ? ? ? ? ? ? ? ? ? ?列1 ? ? ? ? ? ? ? ? ? ?</th>
? ? ? ? ? ? ? ? ? ?<th style="width:40%">
? ? ? ? ? ? ? ? ? ? ? ?列2 ? ? ? ? ? ? ? ? ? ?</th>
? ? ? ? ? ? ? ? ? ?<th style="width:40%">
? ? ? ? ? ? ? ? ? ? ? ?列3 ? ? ? ? ? ? ? ? ? ?</th>
? ? ? ? ? ? ? ?</tr>
? ? ? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ? ? ?0 ? ? ? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ? ? ?0 ? ? ? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ? ? ?0 ? ? ? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ?</tr>
? ? ? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ? ? ?0 ? ? ? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ? ? ?0 ? ? ? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ? ? ?0 ? ? ? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ?</tr>
? ? ? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ? ? ?0 ? ? ? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ? ? ?0 ? ? ? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ? ? ?0 ? ? ? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ?</tr>
? ? ? ? ? ?</table>
? ? ? ?</div>
? ? ? ?<br>
? ? ? ?<br>
? ? ? ?<br>
? ? ? ?<div id="pager">
? ? ? ? ? ?<div id="prev" class="button">Previous</div>
? ? ? ? ? ?<div id="next" class="button">Next</div>
? ? ? ?</div>
? ?</section>
? ?<script src="js/jquery-min.js"></script>
? ?<script>
? ? ? ?var tdtext = 0;
? ?
? ? ? ?$().ready(function(){
? ? ? ? ? ? ? ?$("#prev").click(function() { ? ? ? ? ? ? ? ? ? ? ? ?var self = $("#rotateDiv table");
? ? ? ? ? ? ? ? ? ? ? ?self.attr("class", "table");
? ? ? ? ? ? ? ? ? ? ? ?rotateRight(self);
? ? ? ? ? ? ? ? ? ? ? ?setTimeout(loadPrev, 500);
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?);
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?$("#next").click(function() { ? ? ? ? ? ? ? ? ? ? ? ?var self = $("#rotateDiv table");
? ? ? ? ? ? ? ? ? ? ? ?self.attr("class", "table");
? ? ? ? ? ? ? ? ? ? ? ?rotateLeft(self);
? ? ? ? ? ? ? ? ? ? ? ?setTimeout(loadNext, 500);
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?);
? ? ? ? ? ?}
? ? ? ?); ? ? ? ?
? ? ? ?function rotateLeft(el) {
? ? ? ? ? ?el.addClass("animation-rotate-left");
? ? ? ?} ? ? ? ?
? ? ? ?function rotateLeftBack(el) {
? ? ? ? ? ?el.addClass("animation-rotate-left-back");
? ? ? ?} ? ? ? ?
? ? ? ?function rotateRight(el) {
? ? ? ? ? ?el.addClass("animation-rotate-right");
? ? ? ?} ? ? ? ?
? ? ? ?function rotateRightBack(el) {
? ? ? ? ? ?el.addClass("animation-rotate-right-back");
? ? ? ?} ? ? ? ?
? ? ? ?function loadPrev(){ ? ? ? ? ? ?var self = $("#rotateDiv table"); ? ? ? ? ? ?tdtext -= 1;
? ? ? ? ? ?self.find("td").html(tdtext)
? ? ? ? ? ?rotateRightBack(self);
? ? ? ?} ? ? ? ?
? ? ? ?function loadNext(){ ? ? ? ? ? ?var self = $("#rotateDiv table"); ? ? ? ? ? ?tdtext += 1;
? ? ? ? ? ?self.find("td").html(tdtext)
? ? ? ? ? ?rotateLeftBack(self);
? ? ? ?} ? ?</script></body></html>
2. 這個(gè)html需要一個(gè)css及jquery，請(qǐng)自行修改jquery連接，css也請(qǐng)對(duì)應(yīng)好地址
3. 建css，代碼如下
.table{border-collapse:collapse;width:100%;box-shadow:5px 5px 1px 1px #aaaaaa;}.table,.table th,.table td{border:solid 1px #7788aa}.table th{color:white;background-color:#556677}#rotateDiv{width:600px}#pager{padding-right:10px}#pager .button{display:inline-block;width:75px;height:35px;line-height:35px;border:solid 1px #22aaff;text-align:center;vertical-align:center;border-radius:5px}#pager .button:hover{background-color:#1188ee;cursor:pointer;color:white;-webkit-transform:scale(1.1,1.1)}#pager .button:active{background-color:#0055aa;cursor:pointer;color:white;-webkit-transform:scale(0.95,0.95)}.animation-rotate-left{-webkit-animation:rotate-left 0.5s ease-in}.animation-rotate-left-back{-webkit-animation:rotate-left-back 0.5s ease-out}.animation-rotate-right{-webkit-animation:rotate-right 0.5s ease-in}.animation-rotate-right-back{-webkit-animation:rotate-right-back 0.5s ease-out}@-webkit-keyframes rotate-left{0%{-webkit-transform:perspective(1200px) rotateY(0deg);opacity:1} 100%{-webkit-transform:perspective(1200px) rotateY(-90deg);opacity:0.5}}
@-webkit-keyframes rotate-left-back{0%{-webkit-transform:perspective(1200px) rotateY(90deg);opacity:0.5} 100%{-webkit-transform:perspective(1200px) rotateY(0deg);opacity:1}}
@-webkit-keyframes rotate-right{0%{-webkit-transform:perspective(1200px) rotateY(0deg);opacity:1} 100%{-webkit-transform:perspective(1200px) rotateY(90deg);opacity:0.5}}
@-webkit-keyframes rotate-right-back{0%{-webkit-transform:perspective(1200px) rotateY(-90deg);opacity:0.5} 100%{-webkit-transform:perspective(1200px) rotateY(0deg);opacity:1}}