[原创]纯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:} 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翻页翻转特效的更多相关文章
- 纯CSS3超酷3D旋转立方体动画特效
简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...
- 一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id= ...
- OC纯代码全手工打造ScroolView实现翻页
OC纯代码全手工打造ScroolView实现翻页 1. 概述 分为三部分: 上部标题ScrollView 下部内容ScrollView 上部当前页 标示线 2. 效果 上下两部分都随着手势的滑动一块滑 ...
- 纯css3实现的3D按钮
前面已经为大家介绍了好多纯css3实现的按钮.今天要再给大家带来一款纯css3实现的3D按钮.在实例中给出了五种颜色的3D按钮.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
- 纯CSS3彩色边线3D立体按钮制作教程
原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...
- 纯CSS3打造七巧板
原文:纯CSS3打造七巧板 最近项目上要制作一个七巧板,脑子里瞬间闪现,什么...七巧板不是小时候玩的吗... 七巧板的由来 先来个科普吧,是我在查资料过程中看到的,感觉很有意思. 宋朝有个叫黄伯思的 ...
- 纯css3打造瀑布流布局
纯css3打造瀑布流布局 原理: 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定列间隙 4.break-inside: ...
- 纯CSS3打造非常炫的加载动画
纯css3打造的一款非常炫的加载图.用在需要一定时间加载的地方非常合适.先上效果图: 点击这里在线预览 代码非常简单.没有用任何javascript代码.纯css3实现. html代码: <di ...
随机推荐
- WindowsCE project missing Microsoft.CompactFramework.CSharp.targets in Visual Studio 2008
00x0 前言 之前在Windows 7系统中开发的WindowsCE项目,最近换成Windows 10系统,需要将项目进行修改,打开项目后提示如下错误: 无法读取项目文件"App.cspr ...
- # ASP.NET Core依赖注入解读&使用Autofac替代实现
标签: 依赖注入 Autofac ASPNETCore ASP.NET Core依赖注入解读&使用Autofac替代实现 1. 前言 2. ASP.NET Core 中的DI方式 3. Aut ...
- HTML5火焰文字特效DEMO演示
效果展示:http://hovertree.com/texiao/html5/26/ 效果图: 扫描二维码查看效果:
- String和Date、Timestamp之间的转换
一.String与Date(java.util.Date)互转 1.1 String -> Date String dateStr = "2010/05/04 12:34:23&quo ...
- entityframework学习笔记--004-无载荷与有载荷关系
1.无载荷(with NO Payload)的多对多关系建模 在数据库中,存在通过一张链接表来关联两张表的情况.链接表仅包含连接两张表形成多对多关系的外键,你需要把这两张多对多关系的表导入到实体框架模 ...
- Xdebug文档（七） 远程调试
Xdebug提示调试客户端接口与PHP运行相联系.该章节解释如何设置PHP与xdebug,并推荐一些客户端. 介绍 Xdebug的远程调试器允许你检查数据结构,交互式地穿过和调试你的代码.该协议已经开 ...
- jQuery静态方法noConflict的使用和源码分析
所谓静态方法是jQuery本身得公共方法,并不需要通过实例化来调用,一般也称为工具方法,下面先来列绝下jQuery.noConflict方法的用法: noConflict() 方法让渡变量 $ 的 j ...
- iOS tableView右滑显示选择
如何使用UITableViewRowAction实现右滑选择呢? 1.在iOS8以前,我们实现tableview中滑动显示删除,置顶,更多等等的按钮时,都需要自己去实现,在iOS8中系统已经写好了,只 ...
- 熟悉HTML CSS布局模型
HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
- 【iOS】屏幕适配之NSLayoutConstraint
前言 如何实现一张图片在iPhone和iPad上显示不同的尺寸,我了解到一般有三种办法:直接手写代码动态添加约束:把NSLayoutConstraint关联到ViewController里再viewD ...