libs/js/jquery-mobile-1.1.0/css/structure/jquery.mobile.transition.flip.css

   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 add
   3  * some depth as the element flips. The depth number represents the distance of
   4  * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
   5  * value.
   6  */
   7
   8 .viewport-flip {
   9         -webkit-perspective: 1000;
  10         -moz-perspective: 1000;
  11         position: absolute;
  12 }
  13 .flip {
  14         -webkit-backface-visibility:hidden;
  15         -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. */
  16         -moz-backface-visibility:hidden;
  17         -moz-transform:translateX(0);
  18 }
  19
  20 .flip.out {
  21         -webkit-transform: rotateY(-90deg) scale(.9);
  22         -webkit-animation-name: flipouttoleft;
  23         -webkit-animation-duration: 175ms;
  24         -moz-transform: rotateY(-90deg) scale(.9);
  25         -moz-animation-name: flipouttoleft;
  26         -moz-animation-duration: 175ms;
  27 }
  28
  29 .flip.in {
  30         -webkit-animation-name: flipintoright;
  31         -webkit-animation-duration: 225ms;
  32         -moz-animation-name: flipintoright;
  33         -moz-animation-duration: 225ms;
  34 }
  35
  36 .flip.out.reverse {
  37         -webkit-transform: rotateY(90deg) scale(.9);
  38         -webkit-animation-name: flipouttoright;
  39         -moz-transform: rotateY(90deg) scale(.9);
  40         -moz-animation-name: flipouttoright;
  41 }
  42
  43 .flip.in.reverse {
  44         -webkit-animation-name: flipintoleft;
  45         -moz-animation-name: flipintoleft;
  46 }
  47
  48 @-webkit-keyframes flipouttoleft {
  49     from { -webkit-transform: rotateY(0); }
  50     to { -webkit-transform: rotateY(-90deg) scale(.9); }
  51 }
  52 @-moz-keyframes flipouttoleft {
  53     from { -moz-transform: rotateY(0); }
  54     to { -moz-transform: rotateY(-90deg) scale(.9); }
  55 }
  56 @-webkit-keyframes flipouttoright {
  57     from { -webkit-transform: rotateY(0) ; }
  58     to { -webkit-transform: rotateY(90deg) scale(.9); }
  59 }
  60 @-moz-keyframes flipouttoright {
  61     from { -moz-transform: rotateY(0); }
  62     to { -moz-transform: rotateY(90deg) scale(.9); }
  63 }
  64 @-webkit-keyframes flipintoleft {
  65     from { -webkit-transform: rotateY(-90deg) scale(.9); }
  66     to { -webkit-transform: rotateY(0); }
  67 }
  68 @-moz-keyframes flipintoleft {
  69     from { -moz-transform: rotateY(-90deg) scale(.9); }
  70     to { -moz-transform: rotateY(0); }
  71 }
  72 @-webkit-keyframes flipintoright {
  73     from { -webkit-transform: rotateY(90deg) scale(.9); }
  74     to { -webkit-transform: rotateY(0); }
  75 }
  76 @-moz-keyframes flipintoright {
  77     from { -moz-transform: rotateY(90deg) scale(.9); }
  78     to { -moz-transform: rotateY(0); }
  79 }