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 ...
随机推荐
- 模态对话框 bootstrap-modal.js
调用方式 通过data属性 无需编写JavaScript代码即可生成一个对话框.在一个主控元素,例如按钮,上设置data-toggle="modal",然后再设置data-targ ...
- git 使用系列(一)—— git stash 的使用
1. git 放弃本地修改 git checkout . #本地所有修改的.没有的提交的,都返回到原来的状态 git stash #把所有没有提交的修改暂存到stash里面.可用git stash p ...
- cakephp 的事件系统(Getting to grips with CakePHP’s events system), 基于观察者模式
This article was written about CakePHP 2.x and has been untested with CakePHP 3.x CakePHP seems to g ...
- 盖房子(house)
盖房子(house) 题目描述 FJ最近得到了面积为n*m的一大块土地,他想在这块土地上建造一所房子,这个房子必须膏形的.但是,这块土地并非十全十美,上面有很多不平坦的地方(也可以叫瑕疵).这些瑕疵十 ...
- android脚步---简单图片浏览器改变图像透明度
图片浏览器调用ImageView的setAlpha方法来实现改变图片透明度. main.xml文件如下:三个按钮,两个imageview,,界面定义了两个ImageView,一个是显示局部图片的Ima ...
- 自定义View常处理的回调函数
自定义View常处理的回调函数 onFinishInflate() 当View中所有的子控件均被映射成xml后触发 onMeasure(int, int) 确定所有子元素的大小 onLayout(bo ...
- Jfreet 自动删除生成的图片
jfreechart有自动删除的啊,会话失效就会自动删除的,我刚测试了啊,在web.xml里注册 <listener> <listener-class>org.jfree.ch ...
- Zencart 500错误查找和解决方法
有时在一些虚拟主机下(如HostMonster,BlueHost),Zencart网站会莫名奇妙输出空白页面,查看HTTP头,其实可以看到是500错误.至于500错误的出现原因,一般是由于服务器脚本或 ...
- Django之路: 基本命令与网址进阶
一.Django 基本命令 温馨提示:如果你想学习Django,那么就请您从现在开始按照笔记记录一步一步的用手把代码敲出来,千万不要偷懒哦..... 1.创建一个Django project djan ...
- 《JavaScript语言精髓与编程实践》读书笔记
JavaScript语言精髓与编程实践读书笔记 function v1(v1){ v1 = 100; alert('v1:'+v1); } function v2(name){ v1.apply(th ...