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