@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. Nhibernate 一对多,多对一配置

    先来分析下问题,这里有两张表:Users(用户表) U和PersonalDynamic(用户动态表) PD,其中PD表的UserId对应U表的Id 如图: 现在映射这两张表: 如图: User.hbm ...

  2. Oracle的登录操作

    在完美的启动Oracle数据库之后就可以登录数据库了: 1. 首先登录时使用的用户名默认是“SYSTEM”密码是你安装的时候自行设置的. 登录使用的命令是“sqlplus / as sysdba”之后 ...

  3. require backbone 移动

    http://www.gafish.net/archives/1422 http://www.w3ctech.com/2012/mobile/schedule http://cavenfeng.ite ...

  4. POJ 2492 A Bug's Life(并查集)

    http://poj.org/problem?id=2492 题意 :就是给你n条虫子,m对关系,每一对关系的双方都是异性的,让你找出有没有是同性恋的. 思路 :这个题跟POJ1703其实差不多,也是 ...

  5. loadrunner http协议put模式脚本编写

    web_submit_data("rest", "Action=http://www.test.com/111ojhjh.do", "Method=P ...

  6. 企业2.0杀出一号种子选手 “Linkwedo”横空出世

    当下,最热门的话题就是企业2.0和1.0的新老交替,在过去的时间里OA在国内几乎是企业1.0的代名词,各大知名OA厂商一直占领着国内的企业市场,但企业2.0在全球越演越烈,甚至大有替代企业1.0的的迹 ...

  7. SSH框架中配置Hibernate使用proxool连接池

    一.导入proxool.jar包 案例用的是proxool-0.8.3.jar,一般通过MyEclipse配置的SSH都会包含这个jar,如果没有,就去网上搜下下载导入就好了. 二.新建Proxool ...

  8. hdu3006之位压缩

    The Number of set Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  9. 【Python】代码行数统计

    两级目录,可扩展为N级. # Count the line of dir or file import os, fnmatch, fileinput def ChkFileType(lst): tmp ...

  10. hihocoder #1289 : 403 Forbidden (2016 微软编程笔试第二题)

    #1289 : 403 Forbidden 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Little Hi runs a web server. Sometimes ...