                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /CSS3 3D 特效

翻页效果源码

<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>&nbsp;<a href="javascript:pre()">pre</a>
</div>
</body>
</html>

虫子要学习

2015-08-06

源自：CSS3 3D 特效 3-2

关注问题我要回答

1262

操作

收起

1 回答

qq_无名氏_6
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. 这个html需要一个css及jquery，请自行修改jquery连接，css也请对应好地址

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}}