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

刚接触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里玩玩吧！

posted on 2013-06-18 18:01 極阅读(11474) 评论(2) 编辑收藏举报