css3上翻动画,css3 翻牌动画

1 /*The properties in this rule are only necessary for the 'flip' transition.2 * We need specify the perspective to create a projection matrix. This will add3 * some depth as the element flips. The depth number represents the distance of4 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate5 * value.6 */

7 .viewport-flip{

8 -webkit-perspective:1000;

9 perspective:1000;

10 position:absolute;

11 }

12 .flip{

13 -webkit-backface-visibility:hidden;

14 -webkit-transform:translateX(0); /*Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used.*/

15 backface-visibility:hidden;/*backface-visibility 属性定义当元素不面向屏幕时是否可见*/

16 transform:translateX(0);

17 }

18 .flip.out{

19 -webkit-transform:rotateY(-90deg) scale(.9);

20 -webkit-animation-name:flipouttoleft;

21 -webkit-animation-duration:175ms;

22 transform:rotateY(-90deg) scale(.9);

23 animation-name:flipouttoleft;

24 animation-duration:175ms;

25 }

26 .flip.in{

27 -webkit-animation-name:flipintoright;

28 -webkit-animation-duration:225ms;

29 animation-name:flipintoright;

30 animation-duration:225ms;

31 }

32 .flip.out.reverse{

33 -webkit-transform:rotateY(90deg) scale(.9);

34 -webkit-animation-name:flipouttoright;

35 transform:rotateY(90deg) scale(.9);

36 animation-name:flipouttoright;

37 }

38 .flip.in.reverse{

39 -webkit-animation-name:flipintoleft;

40 animation-name:flipintoleft;

41 }

42 @-webkit-keyframes flipouttoleft{

43 from { -webkit-transform:rotateY(0); }

44 to{-webkit-transform:rotateY(-90deg) scale(.9); }

45 }46 @keyframes flipouttoleft{

47 from { transform:rotateY(0); }

48 to{transform:rotateY(-90deg) scale(.9); }

49 }50 @-webkit-keyframes flipouttoright{

51 from { -webkit-transform:rotateY(0); }

52 to{-webkit-transform:rotateY(90deg) scale(.9); }

53 }54 @keyframes flipouttoright{

55 from { transform:rotateY(0); }

56 to{transform:rotateY(90deg) scale(.9); }

57 }58 @-webkit-keyframes flipintoleft{

59 from { -webkit-transform:rotateY(-90deg) scale(.9); }

60 to{-webkit-transform:rotateY(0); }

61 }62 @keyframes flipintoleft{

63 from { transform:rotateY(-90deg) scale(.9); }

64 to{transform:rotateY(0); }

65 }66 @-webkit-keyframes flipintoright{

67 from { -webkit-transform:rotateY(90deg) scale(.9); }

68 to{-webkit-transform:rotateY(0); }

69 }70 @keyframes flipintoright{

71 from { transform:rotateY(90deg) scale(.9); }

72 to{transform:rotateY(0); }

73 }