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>