在线预览地址：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】扑克正反面翻牌效果的更多相关文章

  1. 【JQuery插件】扑克正反面翻牌效果

    里面有两个demo,支持X横向和Y纵向翻转两个效果. 对元素的布局有一定的讲究,需要分析一下demo的css. 默认翻转速度为80,不要大于100ms. <!DOCTYPE> <ht ...

  2. web CSS3 实现3D动态翻牌效果

    使用纯CSS3 实现翻牌效果  需要注意要给子盒子使用绝对定位,这样两个盒子可以完全重合在一起,需要给父盒子一个 transform-style: preserve-3d;让子盒子翻转时保持3D效果, ...

  3. HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

    首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...

  4. css3之3D翻牌效果

      最近一直在学css3,发现他真的是越来越牛逼.现在的css3已经不在是以前的css了,它能做出的功能效果是我们没法想象的了.它可以实现flash,可以制作一些js能做出来的效果,还可以写出ps做出 ...

  5. css3 翻牌效果

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  6. 使用JS与CSS3的翻转实现3D翻牌效果

    之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果. 这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角, ...

  7. css3的滤镜模糊的效果

    最近在做一个css3的滤镜模糊的效果,但是我发现,有些浏览器一点效果都没有,这是浏览器兼容性导致的,怕今后会忘记所以就先写下来,也希望可以帮到需要的小伙伴. 代码如下: div{//设置半透明滤镜效果 ...

  8. css3实现色子自动翻转效果

    原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...

  9. CSS3下的渐变文字效果实现

    如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...

随机推荐

  1. Python中对列表排序实例

    Python中对列表排序实例 发布时间:2015-01-04 09:01:50 投稿:junjie 这篇文章主要介绍了Python中对列表排序实例,本文给出了9个List的排序实例,需要的朋友可以参考 ...

  2. Tensorflow细节-P186-队列与多线程

    先感受一下队列之美 import tensorflow as tf q = tf.FIFOQueue(2, "int32") # 创建一个先进先出队列 # 队列中最多可以保存两个元 ...

  3. SP10707 COT2 - Count on a tree II 莫队上树

    题意:求一条链 \((u,v)\) 上不同的颜色数. 我们可以求出树的出栈入栈序(or 括号序?我也不确定). 图(from attack) 然后有一个很优美的性质: 设点 \(u\) 的入栈时间为 ...

  4. DVWA-弱会话ID

    本周学习内容: 1.学习web安全深度剖析: 2.学习安全视频: 3.学习乌云漏洞: 4.总结Web应用安全权威指南: 实验内容: 进行DVWA弱会话ID实验 实验步骤: Low 1.打开DVWA,进 ...

  5. python3 结束子线程

    最近公司内部网络经常出问题,奇慢无比,导致人脸检测程序在下载图片时经常卡住,为了不影响数据的核对, 决定在网络不佳图片下载超时后放弃下载,继续执行后续程序. 于是整理出解决思路如下: 1.在线程中完成 ...

  6. 过拟合和欠拟合（Over fitting & Under fitting）

    欠拟合(Under Fitting) 欠拟合指的是模型没有很好地学习到训练集上的规律. 欠拟合的表现形式: 当模型处于欠拟合状态时,其在训练集和验证集上的误差都很大: 当模型处于欠拟合状态时,根本的办 ...

  7. Luogu3774 [CTSC2017]最长上升子序列 【Young表，根号分治】

    题目链接:洛谷 推荐阅读:2019年集训队论文<浅谈杨氏矩阵在信息学竞赛中的应用> 首先我们来看一个东西,叫做Young表. 它是长一个阶梯状的东西(行长和列长都是递减的),并且每一行和每 ...

  8. 数据结构实验之排序三：bucket sort (SDUT 3400)

    桶排序: #include <stdio.h> #include <string.h> int a[5555555]; int main() { int n,m; scanf( ...

  9. js将数组分割成等长数组

    方法一: function group(array, subGroupLength) { let index = 0; let newArray = []; while(index < arra ...

  10. 2019.11.11 模拟赛 T2 乘积求和

    昨天 ych 的膜你赛,这道题我 O ( n4 ) 暴力拿了 60 pts. 这道题的做法还挺妙的,我搞了将近一天呢qwq 题解 60 pts 根据题目给出的式子,四层 for 循环暴力枚举统计答案即 ...