刚接触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="20%"> 列1 </th> <th style="40%"> 列2 </th> <th style="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里玩玩吧！