@keyframes cardFront { 0%40%100% {
02     opacity:1;
03     -webkit-transform:rotateY(0deg);
04     -moz-transform:rotateY(0deg);
05     -ms-transform:rotateY(0deg);
06     transform:rotateY(0deg)
07 }
08 50%90% {
09     opacity:1;
10     -webkit-transform:rotateY(-180deg);
11     -moz-transform:rotateY(-180deg);
12     -ms-transform:rotateY(-180deg);
13     transform:rotateY(-180deg)
14 }
15 }
16  
17 @keyframes cardBack { 0%40% ,100% {
18     opacity:1;
19     -webkit-transform:rotateY(-180deg);
20     -moz-transform:rotateY(-180deg);
21     -ms-transform:rotateY(-180deg);
22     transform:rotateY(-180deg)
23 }
24 50%90% {
25     opacity:1;
26     -webkit-transform:rotateY(0deg);
27     -moz-transform:rotateY(0deg);
28     -ms-transform:rotateY(0deg);
29     transform:rotateY(0deg)
30 }
31 }
32 .fan{ width:300pxheight:100pxposition:relative;}
33 .fan div{ width:300px;height:100pxcolor:#fff;text-align:center;line-height:100px;position:absolute;left:0;top:0;backface-visibility:hidden;}
34 .f1background:red; animation:7s linear 2normal both infinite running cardFront;}
35 .f2background:green; animation:7s linear 2normal both infinite running cardBack;}
01 <div class="fan">
02     <div class="f1">前端老徐图片翻转特效--正面</div>
03     <div class="f2">我是反面</div>
04 </div>

css3水平翻转的更多相关文章

  1. CSS3水平翻转样式和background-size兼容问题

    一.水平翻转和垂直翻转:第一种:随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .flipx { ...

  2. CSS3 水平翻转

    .button_1:hover #button1_img,.button_2:hover #button2_img{ box-shadow: 0 0 10px #9AFE2E; animation: ...

  3. css3 翻转和旋转的区别

    我以前一直以为旋转跟翻转一样,今日自己旋转了好久都发觉跟翻转差一点点,纠结了十几分钟才明白,只能怪自己的立体感太差了. css3中的transform中有旋转,放缩,倾斜,平移的功能,分别对应的属性是 ...

  4. css3动画效果

    css3中的transform中有旋转,放缩,倾斜,平移的功能,分别对应的属性是:rotate,scale,skew,translate 旋转:(rotate) [css] view plaincop ...

  5. 关于css3

    1.选择器: 属性选择器:[]; 查找条件:属性:我们可以通过属性来查找[^=][$=][*=][=][attr] 伪类选择器:  ::: ::before:::after: 必须指定一个conten ...

  6. css3实现动画效果

    一.动画效果的常用属性 实现动画效果需要借助css3的下列属性:transform,transion,animation(具体可以参见教材) 二.动画效果实例 1)文字闪烁的动画效果 /*文字的闪烁效 ...

  7. CSS3 transition/transform

    Transition 1.简写属性transition,可以包括四个属性,这四个属性的顺序按照下面介绍的顺序书写,即transition:property duration timing-functi ...

  8. CSS3 概览 更新时间 2014-0412-1317

    CSS3 概览 CSS3可以划分为:文字.边框模型.背景.动画等. CSS3颜色模块 CSS2.1的时候可以使用4种颜色方式,直接使用颜色名,如 redRGB值,如 rgb(0,90,255)RGB百 ...

  9. css3 翻转和旋转的差别

    我曾经一直以为旋转跟翻转一样,今日自己旋转了好久都发觉跟翻转差一点点,纠结了十几分钟才明确,仅仅能怪自己的立体感太差了. css3中的transform中有旋转,放缩,倾斜,平移的功能,分别相应的属性 ...

随机推荐

  1. Microsoft Visual Studio 2010 Service Pack 1(exe)

    在线安装包:https://cid-3ca83445bd7767a0.office.live.com/browse.aspx/.Public/VS2010 ISO:http://download.mi ...

  2. ubuntu中文版切换为英文后字体变化问题解决

    为了熟悉更多Linux 的英语词汇,希望把Ubuntu 的界面换成英文的.使用System->Administration->Language Suport( 系统-> 管理-> ...

  3. Highcharts资料

    对应的API:   http://api.hcharts.cn/#chart.events 对应的中文网实例:http://www.hcharts.cn/demo/highcharts/dynamic ...

  4. CQRS学习——IOC,配置,仓储隔离以及QueryEntry[其三]

    从IoC开始说起 博主最早开始用的IoC容器叫AutoFac,那时候用它主要是为了生命周期管理——将EF上下文的生命周期限定为每请求.当然也总是每每听到IoC的好处,但是仍然不能理解其优势.最近在学习 ...

  5. BZOJ 3996 [TJOI 2015] 线性代数 解题报告

    首先,我们可以得到: $$D = \sum_{i=1}^{n}\sum_{j=1}^{n}a_i\times a_j\times b_{i,j} - \sum_{i=1}^{n}a_i\times c ...

  6. Android中数据库Sqlite的性能优化

    1.索引简单的说,索引就像书本的目录,目录可以快速找到所在页数,数据库中索引可以帮助快速找到数据,而不用全表扫描,合适的索引可以大大提高数据库查询的效率.(1). 优点大大加快了数据库检索的速度,包括 ...

  7. Uva 12361 File Retrieval 后缀数组+并查集

    题意:有F个单词,1 <= F <=60 , 长度<=10^4, 每次可以输入一个字符串,所有包含该字串的单词会形成一个集合. 问最多能形成多少个不同的集合.集合不能为空. 分析:用 ...

  8. NRE

    NRE是Non-Recurring Engineering的缩写,NRE费用即一次性工程费用,是指集成电路生产成本中非经常性发生的开支,明确地说就是新的集成电路产品的研制开发费·新产品开发过程中的设计 ...

  9. Android 使控件各占屏幕的一半

    在xml中将两个要占屏幕一半的控件都加上android:layout_weight="1": 注意:weight只能用在LinearLayout布局中. 在LinearLayout ...

  10. hdu4323Magic Number(dp)

    http://acm.hdu.edu.cn/showproblem.php?pid=4323 去年的多校 编辑距离的变形 暴力居然过了 还想了好久别的方法,想得很头疼 #include <ios ...