css3 翻牌效果
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS3卡牌翻牌效果</title>
<style type="text/css">
#box {
width: 200px;
height: 337px;
/*background: url('tarot_back.jpg') 0 0 no-repeat;*/
/*background: red;*/
-webkit-transition: -webkit-transform 0.4s ease-in, width 1s, background 0.8s;
} .nor {
background: red;
-webkit-transform: rotate3d(0, 1, 0, 0deg);
} .back {
background: green;
-webkit-transform: rotate3d(0, 1, 0, 180deg);
}
</style>
</head>
<body>
<div id="box" class="nor"> </div>
</body>
<script type="text/javascript">
function $(d) {
return document.getElementById(d);
} var box = $('box'); box.addEventListener('click', function (e) {
box.className = 'back';
setTimeout(function () {
box.className = 'nor';
}, 500);
}, false);
</script>
</html>
css3 翻牌效果的更多相关文章
- css3翻牌效果
原理:通过css3属性-webkit-transform: rotate(0deg)与-webkit-transform: rotate(180deg)对2个元素设置正反面 然后通过有过渡(trans ...
- 基于css3翻牌效果
<div class="map_block float_l lineItem"> <a href="javascript:;" class=& ...
- css3之3D翻牌效果
最近一直在学css3,发现他真的是越来越牛逼.现在的css3已经不在是以前的css了,它能做出的功能效果是我们没法想象的了.它可以实现flash,可以制作一些js能做出来的效果,还可以写出ps做出 ...
- HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果
首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...
- 使用JS与CSS3的翻转实现3D翻牌效果
之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果. 这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角, ...
- web CSS3 实现3D动态翻牌效果
使用纯CSS3 实现翻牌效果 需要注意要给子盒子使用绝对定位,这样两个盒子可以完全重合在一起,需要给父盒子一个 transform-style: preserve-3d;让子盒子翻转时保持3D效果, ...
- css3 翻牌(rotate) 以及翻转 导致边缘锯齿解决 方法
主要知识点:rotate旋转以及 outline透明的像素消除(明显降低)火狐旋转是产生的 锯齿 首先看结构: <li class="flip-container " ...
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- Hover.css:一组超实用的 CSS3 悬停效果和动画
Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...
随机推荐
- tps,qps
http://blog.itpub.net/22664653/viewspace-767265/
- 关于java.lang.reflect.InvocationTargetException(jar 包缺少或者冲突)的错误
我在合肥那边运行了的是湖北石首市的项目没有错 可是回武汉之后 运行这个项目 点击这里的时候 就报错java.lang.reflect.InvocationTargetException 不是数据库 ...
- 使用JAVA NIO实现的UDP client和server
//////////////////////////////////////////////////////////////////////////////////////////////////// ...
- docker 镜像仓库 Harbor 部署 以及 跨数据复制
docker 镜像仓库 Harbor 部署 跨数据复制 Harbor 是 Vmwar 公司开源的 企业级的 Docker Registry 管理项目 它主要 提供 Dcoker Registry 管理 ...
- DataGridView很详细的用法
DataGridiew用法总结 一.DataGridView 取得或者修改当前单元格的内容: 当前单元格指的是 DataGridView 焦点所在的单元格,它可以通过 DataGridView 对象的 ...
- Monkey and Banana(基础DP)
Monkey and Banana Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- SpringMVC+Spring+hibernate整合及分页
1. 新建web project 2. 引入jar, 3. 创建包com.tgb.web.controller, 下面创建包(dao,entity,service, config,spring,hib ...
- Android启动脚本init.rc(2)
在Android中使用启动脚本init.rc,可以在系统的初始化中进行简单的操作. init.rc启动脚本路径:system/core/rootdir/init.rc 内容: Commands:命令 ...
- DHCP详解
概述 DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个局域网的网络协议,使用UDP协议工作, 主要有两个用途:给内部网络或网络服务供应商自动分 ...
- Bootstrap-dialog的使用(续Bootstrap Table)
Bootstrap-dialog实现表格内容的增,删,改. 插件引入:必须先引入jquery和bootstrap和artTemplate. <link rel="stylesheet& ...