您的位置：首页 > Web前端 > CSS

[原创]纯CSS3打造的3D翻页翻转特效

2013-06-18 18:01 876 查看
刚接触CSS3动画，心血来潮实现了一个心目中自己设计的翻页效果的3D动画，页面纯CSS3，目前只能在Chrome中玩，理论上可以支持Safari。

1. 新建HTML，代码如下（数据和翻页后的数据都是瞎模拟的）

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


4.好了，在Chrome里玩玩吧！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航