Ajax Loader
HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
 
3
<html>
4
<head>
5
    <title>flip menu</title>
6
</head>
7
 
8
<body>
9
    <h2>Best result with webkit prefix browsers</h2>
10
 
11
    <ul>
12
        <li>
13
            <a class="entypo-menu" href="#"></a> <span class="menu">Menu</span>
14
        </li>
15
 
16
        <li>
17
            <a class="entypo-star" href="#"></a> <span>Favorite</span>
18
        </li>
19
 
20
        <li>
21
            <a class="entypo-newspaper" href="#"></a> <span>About us</span>
22
        </li>
23
 
24
        <li>
25
            <a class="entypo-location" href="#"></a> <span>Find us</span>
26
        </li>
27
 
28
        <li>
29
            <a class="entypo-link" href="#"></a> <span>Share</span>
30
        </li>
31
 
32
        <li>
33
            <a class="entypo-help-circled" href="#"></a> <span>FAQ's</span>
34
        </li>
35
    </ul>
36
</body>
37
</html>
 
CSS 
@import url(http://weloveiconfonts.com/api/?family=entypo);
1
@import url(http://weloveiconfonts.com/api/?family=entypo);
2
 
3
/* entypo */
4
[class*="entypo-"]:before {
5
  font-family: 'entypo', sans-serif;
6
}
7
 
8
@-webkit-keyframes flip {
9
  0%{-webkit-transform:rotateY(0deg);
10
  opacity:1;}
11
  100%{-webkit-transform:rotateY(95deg);
12
  opacity:0;}
13
}
14
 
15
@-moz-keyframes flip {
16
  0%{-webkit-transform:rotateY(0deg);
17
  opacity:1;}
18
  100%{-webkit-transform:rotateY(95deg);
19
  opacity:0;}
20
}
21
 
22
@-o-keyframes flip {
23
  0%{-webkit-transform:rotateY(0deg);
24
  opacity:1;}
25
  100%{-webkit-transform:rotateY(95deg);
26
  opacity:0;}
27
}
28
 
29
@keyframes flip {
30
  0%{-webkit-transform:rotateY(0deg);
31
  opacity:1;}
32
  100%{-webkit-transform:rotateY(95deg);
33
  opacity:0;}
34
}
35
body {
36
 background:url(http://developer.jmbarcelon.com/img/forestblur.jpg) no-repeat top center;
37
  background-size: cover 100%;
38
}
39
 
40
h2 {
41
    color: #555;
42
    text-align: center;
43
}
44
 
45
ul {
46
  position:absolute;
47
  left:0;
48
  right:0;
49
  margin:50px auto;
50
  padding:0;
51
52
  width:200px;
53
  height:220px;
54
  list-style:none;
55
  -webkit-perspective:1000;
56
  -moz-perspective:1000;
57
  -o-perspective:1000;
58
  perspective:1000;
59
}
60
 
61
li {
62
  margin:2px 0;
63
  padding:0;
64
}
65
 
66
li a {
67
  display:block;
68
  height:18px;
69
  width:20px;
70
  background:rgba(155,155,155,0.5);
71
  color:#fff;
72
  padding:8px 6px;
73
  text-decoration:none;
74
  text-align:center;
75
}
76
.menu {
77
  opacity:1;
78
  -webkit-transform:rotateY(0deg);
79
  -moz-transform:rotateY(0deg);
80
  -o-transform:rotateY(0deg);
81
  transform:rotateY(0deg);
82
  -webkit-transition:.3s;
83
  -moz-transition:.3s;
84
  -o-transition:.3s;
85
  transition:.3s;
86
}
87
li span {
88
  width:154px;
89
  float:left;
90
  text-align:center;
91
  background:rgba(155,155,155,0.5);
92
  color:#fff;
93
  margin:-34px 34px;
94
  padding:8px 6px;
95
  transform-origin:0%;
96
  opacity:0;
97
  -webkit-transform:rotateY(95deg);
98
  -webkit-transition:.5s;
99
  -moz-transition:.5s;
100
  -o-transition:.5s;
101
  transition:.5s;
102
  -webkit-animation: flip 2s;
103
  -moz-animation: flip 2s;
104
  -o-animation: flip 2s;
105
  animation: flip 2s;
106
}
107
 
108
span[class='menu']{-webkit-animation:none;}
109
li:nth-child(2) span {
110
  -webkit-animation-delay:.5s;
111
  -moz-animation-delay:.5s;
112
  -o-animation-delay:.5s;
113
  animation-delay:.5s;}
114
li:nth-child(3) span {
115
  -webkit-animation-delay:.4s;
116
  -moz-animation-delay:.4s;
117
  -o-animation-delay:.4s;
118
  animation-delay:.4s;}
119
li:nth-child(4) span {
120
  -webkit-animation-delay:.3s;
121
  -moz-animation-delay:.3s;
122
  -o-animation-delay:.3s;
123
  animation-delay:.3s;}
124
li:nth-child(5) span {
125
  -webkit-animation-delay:.2s;
126
  -moz-animation-delay:.2s;
127
  -o-animation-delay:.2s;
128
  animation-delay:.2s;}
129
li:nth-child(6) span {
130
  -webkit-animation-delay:.1s;
131
  -moz-animation-delay:.1s;
132
  -o-animation-delay:.1s;
133
  animation-delay:.1s;}
134
 
135
li a:hover ~ span {
136
  opacity:1;
137
  -webkit-transform:rotateY(0deg);
138
  -moz-transform:rotateY(0deg);
139
  -o-transform:rotateY(0deg);
140
  transform:rotateY(0deg);
141
  -webkit-transition:.5s;
142
  -moz-transition:.5s;
143
  -o-transition:.5s;
144
  transition:.5s;
145
}
 

flip menu perspective

CSSDeck G+