@keyframes cardFront { 0% , 40% , 100% { |
03 |
-webkit-transform:rotateY( 0 deg); |
04 |
-moz-transform:rotateY( 0 deg); |
05 |
-ms-transform:rotateY( 0 deg); |
06 |
transform:rotateY( 0 deg) |
10 |
-webkit-transform:rotateY( -180 deg); |
11 |
-moz-transform:rotateY( -180 deg); |
12 |
-ms-transform:rotateY( -180 deg); |
13 |
transform:rotateY( -180 deg) |
17 |
@keyframes cardBack { 0% , 40% , 100% { |
19 |
-webkit-transform:rotateY( -180 deg); |
20 |
-moz-transform:rotateY( -180 deg); |
21 |
-ms-transform:rotateY( -180 deg); |
22 |
transform:rotateY( -180 deg) |
26 |
-webkit-transform:rotateY( 0 deg); |
27 |
-moz-transform:rotateY( 0 deg); |
28 |
-ms-transform:rotateY( 0 deg); |
29 |
transform:rotateY( 0 deg) |
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 |
.f 1 { background : red ; animation: 7 s linear 2 s normal both infinite running cardFront;} |
35 |
.f 2 { background : green ; animation: 7 s linear 2 s normal both infinite running cardBack;} |
02 |
< div class = "f1" >前端老徐图片翻转特效--正面</ div > |
03 |
< div class = "f2" >我是反面</ div > |
全部教程http://each.sinaapp.com/angular/index.html