【CSS3 DEMO】扑克正反面翻牌效果
在线预览地址：http://dtdxrk.github.io/game/css3-demo/drawbox.html
用到两个属性：
一个是动画时间
transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
一个是3d
transform: rotate3d(0,1,0,-180deg);
-webkit-transform: rotate3d(0,1,0,-180deg);
-moz-transform: rotate3d(0,1,0,-180deg);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0; padding:0;} .drawbox{width: 200px;height: 200px; position: relative;-webkit-perspective:500px; }
.drawbox-front, .drawbox-behand{ position: absolute;top:0;left:0;z-index: 0;-webkit-transition-duration: 0.8s;-webkit-transform: rotate3d(0,1,0,180deg);}
.drawbox-front{z-index: 1;-webkit-transform: rotate3d(0,1,0,0deg);}
.drawbox:hover .drawbox-front{z-index: 0;-webkit-transform: rotate3d(0,1,0,-180deg);}
.drawbox:hover .drawbox-behand{z-index: 1;-webkit-transform: rotate3d(0,1,0,0deg);}
</style>
</head>
<body>
<div class="drawbox">
<div class="drawbox-front"><img width="200" height="200" src="http://car1.autoimg.cn/car/carnews/2015/4/14/d_201504141931123924435110.jpg" alt=""></div>
<div class="drawbox-behand"><img width="200" height="200" src="http://car1.autoimg.cn/car/carnews/2015/4/14/d_201504142232044255132110.jpg" alt=""></div>
</div> <div class="drawbox">
<div class="drawbox-front"><img width="200" height="200" src="http://pic.cnmo-img.com.cn/201501/cnmo200180_03_0107.jpg" alt="" border="0"></div>
<div class="drawbox-behand"><img width="200" height="200" src="http://pic.cnmo-img.com.cn/201412/ZET2486hp200180news_1224.gif" alt="" border="0"></div>
</div>
</body>
</html>
【CSS3 DEMO】扑克正反面翻牌效果的更多相关文章
- 【JQuery插件】扑克正反面翻牌效果
里面有两个demo,支持X横向和Y纵向翻转两个效果. 对元素的布局有一定的讲究,需要分析一下demo的css. 默认翻转速度为80,不要大于100ms. <!DOCTYPE> <ht ...
- web CSS3 实现3D动态翻牌效果
使用纯CSS3 实现翻牌效果 需要注意要给子盒子使用绝对定位,这样两个盒子可以完全重合在一起,需要给父盒子一个 transform-style: preserve-3d;让子盒子翻转时保持3D效果, ...
- HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果
首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...
- css3之3D翻牌效果
最近一直在学css3,发现他真的是越来越牛逼.现在的css3已经不在是以前的css了,它能做出的功能效果是我们没法想象的了.它可以实现flash,可以制作一些js能做出来的效果,还可以写出ps做出 ...
- css3 翻牌效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- 使用JS与CSS3的翻转实现3D翻牌效果
之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果. 这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角, ...
- css3的滤镜模糊的效果
最近在做一个css3的滤镜模糊的效果,但是我发现,有些浏览器一点效果都没有,这是浏览器兼容性导致的,怕今后会忘记所以就先写下来,也希望可以帮到需要的小伙伴. 代码如下: div{//设置半透明滤镜效果 ...
- css3实现色子自动翻转效果
原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...
- CSS3下的渐变文字效果实现
如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...
随机推荐
- 判断指定对象是否进入浏览器可视窗口，true 进入，false 没进入
//判断指定对象是否进入浏览器可视窗口,true 进入,false 没进入 var $win = $(window);//jQuery 的 window 对象 即:文档对象 function isVi ...
- TCPDUMP抓包学习
一.抓包基础 1.抓网卡ens33 的包,有多大抓多大,然后保存到a.cap中 [root@localhost ~]# tcpdump -i ens33 -s -w a.cap tcpdump: li ...
- CF19D Points 平衡树
题意:支持插入/删除点 $(x,y)$,查询一个点右上方横坐标与之最接近的点坐标. 我们可以对于每一个操作过的横坐标都开一个 $set$,然后再开一个平衡树,维护每个横坐标上最大的纵坐标. 然后查询点 ...
- am335x system upgrade kernel ec20 simcom7600ce(十一)
1 Scope of Document This document describes 4G hardware design, support quectel ec20 4G module/ ...
- 引领开发工具近40年的程序员Anders Hejlsberg
有位神级程序员在近40年中一直创造引领潮流的开发工具(Turbo Pascal/Delphi/C#/TypeScript),他就是Anders Hejlsberg. 一. Anders并没有大学文凭, ...
- 时间模块-datetime精确到微妙级
1.标准转换格式符号说明 %a 本地星期的短名称 如:Sun, Mon, ..., Sat (en_US); So, Mo, ..., Sa (de_DE) %A 本地星期全名称 如 :Sunday, ...
- UOJ#220. 【NOI2016】网格 Tarjan
原文链接www.cnblogs.com/zhouzhendong/p/UOJ220.html 前言 真是一道翔题. 草率题解 -1 的情况很好判,只有两种情况: n * m - c < 2 或者 ...
- cmake和json安装
一.cmake源码安装 官网下载源码:https://cmake.org/download/ 安装: ./bootstrap make make install cmake --version 二.j ...
- linux系统下以存储从大到小并以K，M，G为单位的方式查看当前目录下的文件信息
zhuazai:https://blog.csdn.net/sty945/article/details/79830915 前言 ls命令 ls -a ls -l ll du命令 du -s du - ...
- 如何选题？| 什么样的科学问题 | 研究项目才是有意义的？| scientific method
搞科研,尤其是生命科学,经常会觉得自己做的东西是坨屎,没有任何意义. 在硕博的时候这种感觉会非常强烈,一个是自己思考能力不足:二是你的项目不是你设计的,不懂个中缘由,只执行的话就会很无聊,找不到意义感 ...