css3水平翻转

@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:300px; height:100px; position:relative;}
33 .fan div{ width:300px;height:100px; color:#fff;text-align:center;line-height:100px;position:absolute;left:0;top:0;backface-visibility:hidden;}
34 .f1{ background:red; animation:7s linear 2s normal both infinite running cardFront;}
35 .f2{ background:green; animation:7s linear 2s normal both infinite running cardBack;}

01 <div class="fan">
02     <div class="f1">前端老徐图片翻转特效--正面div>
03     <div class="f2">我是反面div>
04 div>

转载于:https://www.cnblogs.com/xfdmb/p/6004768.html