@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. JSON和JSONP,也许你会豁然开朗,含jQuery用例

    前言: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可 ...

  2. tomcat 7 下添加 shared/lib 文件夹

    你打开tomcat7\conf\catalina.properties文件再打开tomcat5的,看完后, 你就知道了 tomcat 5.5.35 # # List of comma-separate ...

  3. PHP漏洞全解(七)-Session劫持

    本文主要介绍针对PHP网站Session劫持.session劫持是一种比较复杂的攻击方法.大部分互联网上的电脑多存在被攻击的危险.这是一种劫持tcp协议的方法,所以几乎所有的局域网,都存在被劫持可能. ...

  4. 浅谈HTTP响应拆分攻击

    在本文中,我们将探讨何谓HTTP响应拆分以及攻击行为是怎样进行的.一旦彻底理解了其发生原理(该原理往往被人所误解),我们就可以探究如何利用响应拆分执行跨站点脚本(简称XSS).接下来自然就是讨论如果目 ...

  5. NuGet学习笔记(1)——初识NuGet及快速安装使用

    关于NuGet园子里已经有不少介绍及使用经验,本文仅作为自己研究学习NuGet一个记录. 初次认识NuGet是在去年把项目升级为MVC3的时候,当时看到工具菜单多一项Library Package M ...

  6. Android 完全退出程序,以及再按一次返回键退出程序

    再按一次返回键退出最终完整方案: boolean isExit; @Override    protected void onCreate(Bundle savedInstanceState) {   ...

  7. 解决在IE里预览时弹出:为了有利于保护安全性......

    用Dreamweaver做网页,在IE里预览时弹出这个:为了有利于保护安全性,Internet Explorer 已限制此网页运行可以访问计算机的脚本或ActiveX控件. 在页面顶部加段代码就可以了 ...

  8. Linux Kernel本地权限提升漏洞

    漏洞版本: Linux Kernel 漏洞描述: Bugtraq ID:64291 CVE ID:CVE-2013-6368 Linux Kernel是一款开源的操作系统. 如果用户空间提供的vapi ...

  9. [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.2.3

    (1). Let $\sed{A_\al}$ be a family of mutually commuting operators. Then, there exists a common Schu ...

  10. [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.2.1

    For fixed basis of in $\scrH$ and $\scrK$, the matrix $A^*$ is the conjugate transpose of the matrix ...