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

时间：2021-05-14 23:24:39

刚接触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:} 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:}}

@-webkit-keyframes rotate-right{0%{-webkit-transform:perspective(1200px) rotateY(0deg);opacity:} 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:}}

4.好了，在Chrome里玩玩吧！

相关文章