@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. 微软Hololens学院教程- Holograms 101: Introduction with Device【微软教程已经更新,本文是老版本】

    这是老版本的教程,为了不耽误大家的时间,请直接看原文,本文仅供参考哦!原文链接:https://developer.microsoft.com/EN-US/WINDOWS/HOLOGRAPHIC/ho ...

  2. 17款code review工具

    本文是码农网原创翻译,转载请看清文末的转载要求,谢谢合作! 好的代码审查器可以大大地帮助程序员提高代码质量,减少错误几率. 虽然现在市场上有许多可用的代码审查工具,但如何挑选也是一个艰巨的任务.在咨询 ...

  3. sjtu1585 oil

    Description Crystal家的公司最近承包了一个大油田.整块油田为一个矩形区域,被划分为\(n \times m\)个小块. Crystal亲自调查了每个小块的石油储备量.这些数据表示为\ ...

  4. [转载]Winform等待窗口的实现(附源代码)

    在开发Winform程序的时候,经常会用到等待窗口(如网络通讯.数据库连接等需要一定时间来执行的操作),这样可以给用户提供更好的体验. 等待窗口的主要功能是一边执行需要等待的操作,一边显示一个等待界面 ...

  5. 引擎渲染速度测试--我js代码写得少你不要骗我

    上一张图,很多人都看过的 地址:http://aui.github.io/artTemplate/test/test-speed.html 这个地址是在看artTemplate的时候看到的,很早都看过 ...

  6. Altium快捷键

    M快捷键 PCB快捷键 编辑 视图

  7. NIS 服务器

    有没有想过,如果我有十部 Linux 主机,这十部主机仅负责不同的功能,事实上, 所有的主机账号与对应的密码都相同!那么我是将账号与密码分别设定置在十部计算机上面, 还是可以透过一部主机做为账号管理的 ...

  8. SSO(转)

    一.介绍       主站下有多个子系统,每次登录主系统,跳转到子系统时,又需要重新登录: 子系统与主系统都有各自的用户信息表:各个系统的用户角色.权限也各不相同: 二.目的       每次登录主系 ...

  9. wzplayer2 for windows ActiveX 试用地址

    提供wzplayer2 for windows ActiveX,测试地址:http://www.coolradio.cn/IE.htm 大家使用时候必须允许未签名ActiveX下载和运行,否则将无法正 ...

  10. Item Import: What Does "Sync" Items Do? (Doc ID 417887.1)

    In this Document Goal Solution APPLIES TO: Oracle Item Master - Version 11.5.10.0 to 11.5.10.0 [Rele ...