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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
// https://github.com/h5bp/Effeckt.css
.slide () {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
&.left {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
&.center {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
&.right {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: hidden;
display: none;
&.transition {
visibility: visible;
display: block;
}
}
&.transition {
-webkit-transition-duration: .25s;
transition-duration: .25s;
}
}
// http://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.slide();
}
/*
.registrationForm {
.steps {
.step {
position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
.slide();
}
}
}
*/
//----------------------------------------------------------------------
// tentative 3D transformations
/*
.page {
transform: rotateY( 0deg) translateZ( 100px);
&.left {
transform: rotateY( -90deg) translateZ( 100px);
}
&.center {
transform: rotateY( 0deg) translateZ( 100px);
}
&.right {
transform: rotateY( 90deg) translateZ( 100px);
}
}
#mainDiv {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 3s;
&.show-front { transform: translateZ( -100px ) rotateY( 0deg ); }
&.show-back { transform: translateZ( -100px ) rotateX( -180deg ); }
&.show-right { transform: translateZ( -100px ) rotateY( -90deg ); }
&.show-left { transform: translateZ( -100px ) rotateY( 90deg ); }
&.show-top { transform: translateZ( -100px ) rotateX( -90deg ); }
&.show-bottom { transform: translateZ( -100px ) rotateX( 90deg ); }
}
*/
//=======================================================================
//=======================================================================
//========================================================
|
