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

[原创]纯CSS3打造的3D翻页翻转特效的更多相关文章

  1. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  2. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

  3. OC纯代码全手工打造ScroolView实现翻页

    OC纯代码全手工打造ScroolView实现翻页 1. 概述 分为三部分: 上部标题ScrollView 下部内容ScrollView 上部当前页 标示线 2. 效果 上下两部分都随着手势的滑动一块滑 ...

  4. 纯css3实现的3D按钮

    前面已经为大家介绍了好多纯css3实现的按钮.今天要再给大家带来一款纯css3实现的3D按钮.在实例中给出了五种颜色的3D按钮.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  5. 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

  6. 纯CSS3彩色边线3D立体按钮制作教程

    原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...

  7. 纯CSS3打造七巧板

    原文:纯CSS3打造七巧板 最近项目上要制作一个七巧板,脑子里瞬间闪现,什么...七巧板不是小时候玩的吗... 七巧板的由来 先来个科普吧,是我在查资料过程中看到的,感觉很有意思. 宋朝有个叫黄伯思的 ...

  8. 纯css3打造瀑布流布局

    纯css3打造瀑布流布局 原理: 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定列间隙 4.break-inside: ...

  9. 纯CSS3打造非常炫的加载动画

    纯css3打造的一款非常炫的加载图.用在需要一定时间加载的地方非常合适.先上效果图: 点击这里在线预览 代码非常简单.没有用任何javascript代码.纯css3实现. html代码: <di ...

随机推荐

  1. GUI 和 GUILayout 的区别

    GUI 和 GUILayout 的区别 A~ GUI是Unity中的基础控件类,其中包含了常用的GUI控件,列如Button,Label,PasswordField,slider,Window等等~ ...

  2. Microsoft Visual Studio 2008 未能正确加载包“Visual Web Developer HTML Source Editor Package” | “Visual Studio HTM Editor Package”

    在安装Microsoft Visual Studio 2008 后,如果Visual Studio 2008的语言版本与系统不一致时,比如:在Windows 7 English System 安装Vi ...

  3. 关于zigbee 网络拓扑节点数量的一点说明

    理论上,一个zigbee网络可以存在65535个节点,即一个协调器下挂这么多个节点(ZR & ZE),但是实际应用中几乎是不可能达到的,达到100~200已经是很不错了,达到300几乎也是凤毛 ...

  4. android raw和assets的区别

    *res/raw和assets的相同点: 1.两者目录下的文件在打包后会原封不动的保存在apk包中,不会被编译成二进制. *res/raw和assets的不同点: 1**.res/raw中的文件会被映 ...

  5. sqlserver性能调优第一步

    相信不少的朋友,无论是做开发.架构的,还是DBA等,都经常听说“调优”这个词.说起“调优”,可能会让很多技术人员心头激情澎湃,也可能会让很多人感觉苦恼,不知道如何入手.当然,也有很多人对此不屑一顾,因 ...

  6. rabbitmq性能优化之Consumer utilisation

    如下所示,每个rabbitmq队列除了发布和消费吞吐量外,还有一个评价MQ队列效率的更加重要的指标Consumer utilisation ,如下: 在最佳利用率情况下,这个值能够达到100%,并且生 ...

  7. Xdebug文档（六） 分析PHP脚本

    分析PHP脚本Xdebug内置分析器能让你找到脚本中的瓶颈并用额外的工具诸如KcacheGrind或WinCacheGrind工具可视化. 介绍 Xdebug分析器是分析PHP代码和判断瓶颈或确定代码 ...

  8. 有问题得就分享（此实现不是 Windows 平台 FIPS 验证的加密算法的一部分）

    今天呢,我写完了MD5加密算法的代码,可是我正高兴的想运行时,按了F5.突然了个这样的窗体 我当时就纳闷了,怎么回事? 代码又没有错,这是乍回事! 于是呢上网查了看看:可以这样解决的 在window中 ...

  9. （原）3.4 Zookeeper应用 - 分布式锁

    本文为原创文章,转载请注明出处,谢谢 分布式锁 1.原理 建立表示锁的父节点(图中locker节点) 每个争抢锁的服务器在locker节点下创建有序的临时节点 判断自己是否抢到锁:获取locker下所 ...

  10. Apache Lucene(全文检索引擎)—分词器

    目录 返回目录:http://www.cnblogs.com/hanyinglong/p/5464604.html 本项目Demo已上传GitHub,欢迎大家fork下载学习:https://gith ...