Ajax Loader
HTML 
  <div id="all">
1
  <div id="all">
2
    <div id="page-flip">
3
      <div id="r1"><div id="p1"><div><div></div></div></div></div>
4
      <div id="p2"><div></div></div>
5
      <div id="r3"><div id="p3"><div><div></div></div></div></div>
6
      <div class="s"><div id="s3"><div id="sp3"></div></div></div>
7
      <div class="s" id="s4"><div id="s2"><div id="sp2"></div></div></div>
8
      <a id="coke" href="#" title="Pure CSS Coke Can"></a>
9
      <a id="meninas" href="#" title="CSS 3D Meninas"></a>
10
    </div>
11
  </div>
12
 
 
CSS 
body {
1
body {
2
    padding: 0;
3
    margin: 0;
4
}
5
 
6
#all {
7
    width: 680px;
8
    margin-left: auto;
9
    margin-right: auto;
10
}
11
 
12
#page-flip {
13
    background-image: url(http://cssdeck.com/uploads/media/items/6/6h4pDpK.jpg);
14
    position: absolute;
15
    padding: 40px 40px 40px 340px;
16
    width: 300px;
17
    height: 400px;
18
    overflow: hidden;
19
}
20
 
21
#r1 {
22
    position: absolute;
23
    z-index: 2;
24
    -webkit-transform-origin: 1315px 500px;
25
    -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
26
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
27
    -webkit-transition-duration: 1s;
28
}
29
 
30
#p1 {
31
    width: 1285px;
32
    height: 1388px;
33
    overflow: hidden;
34
}
35
 
36
#p1 > div {
37
    -webkit-transform-origin: 285px 0;
38
    -webkit-transform: translate(1030px, 500px) rotate(32deg);
39
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
40
    -webkit-transition-duration: 1s;
41
    width: 285px;
42
    height: 388px;
43
    background-image: url(http://cssdeck.com/uploads/media/items/8/87WOlJH.jpg);
44
}
45
 
46
#p1 > div > div {
47
    width: 10px;
48
    height: 388px;
49
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
50
}
51
 
52
#p2 > div {
53
    width: 285px;
54
    height: 388px;
55
    -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
56
    position: absolute;
57
    z-index: 1;
58
    background-image: url(http://cssdeck.com/uploads/media/items/4/4FpEEbu.jpg);
59
}
60
 
61
#r3 {
62
    -webkit-transform-origin: 1315px 500px;
63
    -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
64
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
65
    -webkit-transition-duration: 1s;
66
    position: absolute;
67
    z-index: 2;
68
}
69
 
70
#s3 {
71
    -webkit-transform-origin: 70px 500px;
72
    -webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
73
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
74
    -webkit-transition-duration: 1s;
75
    position: absolute;
76
    z-index: 1;
77
}
78
 
79
#page-flip:hover #s3 {
80
    -webkit-transform-origin: 325px 500px;
81
    -webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
82
}
83
 
84
#sp3 {
85
    width: 25px;
86
    height: 1000px;
87
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
88
    -webkit-transition-property: width;
89
    -webkit-transition-duration: 1s;
90
    overflow: hidden;
91
}
92
 
93
#page-flip:hover #sp3 { width: 11px }
94
 
95
.s {
96
    width: 285px;
97
    height: 388px;
98
    position: absolute;
99
    overflow: hidden;
100
    z-index: 3;
101
}
102
 
103
#s2 {
104
    -webkit-transform-origin: 45px 500px;
105
    -webkit-transform: translate(240px, -500px) rotate(-32deg);
106
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
107
    -webkit-transition-duration: 1s;
108
    position: absolute;
109
}
110
 
111
#sp2 {
112
    width: 15px;
113
    height: 1000px;
114
    background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .18)), to(rgba(0,0,0,0)));
115
    overflow: hidden;
116
}
117
 
118
#s4 {
119
    opacity: 1;
120
    -webkit-transition-duration: 0.5s;
121
}
122
 
123
#page-flip:hover #s4 { opacity: 0 }
124
 
125
#page-flip:hover #s2 {
126
    -webkit-transform-origin: 300px 500px;
127
    -webkit-transform: translate(-15px, -500px) rotate(0deg);
128
}
129
 
130
#p3 {
131
    width: 1285px;
132
    height: 1388px;
133
    overflow: hidden;
134
}
135
 
136
#p3 > div {
137
    -webkit-transform-origin: 0 0;
138
    -webkit-transform: translate(1255px, 500px) rotate(-32deg);
139
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
140
    -webkit-transition-duration: 1s;
141
    -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
142
    width: 285px;
143
    height: 388px;
144
    background-image: url(http://cssdeck.com/uploads/media/items/6/6S8oF28.jpg);
145
    overflow: hidden;
146
}
147
 
148
#p3 > div > div {
149
    width: 9px;
150
    height: 500px;
151
    float: right;
152
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0,0,0,.20)));
153
}
154
 
155
#page-flip:hover #r1 {
156
    -webkit-transform-origin: 1570px 500px;
157
    -webkit-transform: translate(-1285px, -500px) rotate(0deg);
158
}
159
 
160
#page-flip:hover #p1 > div {
161
    -webkit-transform-origin: 285px 0;
162
    -webkit-transform: translate(1285px, 500px) rotate(0deg);
163
}
164
 
165
#page-flip:hover #r3 {
166
    -webkit-transform-origin: 1570px 500px;
167
    -webkit-transform: translate(-1285px, -500px) rotate(0deg);
168
}
169
 
170
#page-flip:hover #p3 > div {
171
    -webkit-transform-origin: 0 0;
172
    -webkit-transform: translate(1000px, 500px) rotate(0deg);
173
}
174
 
175
a {
176
    display: block;
177
    position: absolute;
178
    margin: -20000px 0 0 0;
179
    padding: 1px;
180
    z-index: 3;
181
    -webkit-transition-property: margin;
182
    -webkit-transition-duration: 0.01s;
183
}
184
 
185
#coke {
186
    width: 253px;
187
    height: 158px;
188
}
189
 
190
a:hover {
191
    padding: 0;
192
    border: 1px dotted #92C7C1;
193
}
194
 
195
#page-flip:hover #coke {
196
    -webkit-transition-delay: .8s;
197
    margin: 33px 0 0 14px;
198
}
199
 
200
#meninas {
201
    width: 253px;
202
    height: 167px;
203
}
204
 
205
#page-flip:hover #meninas {
206
    -webkit-transition-delay: .8s;
207
    margin: 203px 0 0 14px;
208
}
 

Pure CSS3 Page Flip Effect

CSSDeck G+