libs/js/jquery-mobile-1.1.0/css/structure/jquery.mobile.transition.turn.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-turn {
   9         -webkit-perspective: 1000;
  10         -moz-perspective: 1000;
  11         position: absolute;
  12 }
  13 .turn {
  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         -webkit-transform-origin: 0;
  17
  18         -moz-backface-visibility:hidden;
  19         -moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
  20         -moz-transform-origin: 0;
  21 }
  22
  23 .turn.out {
  24         -webkit-transform: rotateY(-90deg) scale(.9);
  25         -webkit-animation-name: flipouttoleft;
  26         -moz-transform: rotateY(-90deg) scale(.9);
  27         -moz-animation-name: flipouttoleft;
  28         -webkit-animation-duration: 125ms;
  29         -moz-animation-duration: 125ms;
  30 }
  31
  32 .turn.in {
  33         -webkit-animation-name: flipintoright;
  34         -moz-animation-name: flipintoright;
  35         -webkit-animation-duration: 250ms;
  36         -moz-animation-duration: 250ms;
  37
  38 }
  39
  40 .turn.out.reverse {
  41         -webkit-transform: rotateY(90deg) scale(.9);
  42         -webkit-animation-name: flipouttoright;
  43         -moz-transform: rotateY(90deg) scale(.9);
  44         -moz-animation-name: flipouttoright;
  45 }
  46
  47 .turn.in.reverse {
  48         -webkit-animation-name: flipintoleft;
  49         -moz-animation-name: flipintoleft;
  50 }
  51
  52 @-webkit-keyframes flipouttoleft {
  53     from { -webkit-transform: rotateY(0); }
  54     to { -webkit-transform: rotateY(-90deg) scale(.9); }
  55 }
  56 @-moz-keyframes flipouttoleft {
  57     from { -moz-transform: rotateY(0); }
  58     to { -moz-transform: rotateY(-90deg) scale(.9); }
  59 }
  60 @-webkit-keyframes flipouttoright {
  61     from { -webkit-transform: rotateY(0) ; }
  62     to { -webkit-transform: rotateY(90deg) scale(.9); }
  63 }
  64 @-moz-keyframes flipouttoright {
  65     from { -moz-transform: rotateY(0); }
  66     to { -moz-transform: rotateY(90deg) scale(.9); }
  67 }
  68 @-webkit-keyframes flipintoleft {
  69     from { -webkit-transform: rotateY(-90deg) scale(.9); }
  70     to { -webkit-transform: rotateY(0); }
  71 }
  72 @-moz-keyframes flipintoleft {
  73     from { -moz-transform: rotateY(-90deg) scale(.9); }
  74     to { -moz-transform: rotateY(0); }
  75 }
  76 @-webkit-keyframes flipintoright {
  77     from { -webkit-transform: rotateY(90deg) scale(.9); }
  78     to { -webkit-transform: rotateY(0); }
  79 }
  80 @-moz-keyframes flipintoright {
  81     from { -moz-transform: rotateY(90deg) scale(.9); }
  82     to { -moz-transform: rotateY(0); }
  83 }