Ajax Loader
HTML 
<div class="container">
1
<div class="container">
2
  <ul class="cube">
3
    <li>
4
      <h1>:hover</h1>
5
    </li>
6
    <li></li>
7
    <li></li>
8
    <li></li>
9
    <li>
10
      <h1>hi</h1>
11
    </li>
12
    <li></li>
13
  </ul>
14
</div>
 
CSS 
// VAR
1
// VAR
2
 
3
@color: #39ed39;
4
 
5
@W: 10em;
6
@H: 10em;
7
@E: 10em;
8
 
9
.container{
10
  position: absolute;
11
  top: 50%;
12
  left: 50%;
13
  margin-top: -(@H/2);
14
  margin-left: -(@W/2);
15
  width: @W;
16
  height: @H;
17
  perspective: 500;
18
}
19
 
20
.cube{
21
  cursor: pointer;
22
  display:block;
23
  width: 100%;
24
  height: 100%;
25
  transform-style: preserve-3d;
26
  transform: rotate3d(0,1,0,0deg);
27
  transition: transform 400ms ease-in-out;
28
}
29
 
30
.cube:hover {
31
  transform: rotate3d(0,1,0,-75deg);
32
}
33
 
34
.cube:hover > li:nth-child(1)::after {
35
  left: -30%;
36
  right: 0;
37
  transform: rotate3d(0,0,1,-90deg);
38
}
39
 
40
.cube:hover > li:nth-child(5)::after {
41
  left: -25%;
42
  right: 30%;
43
  transform: rotate3d(0,0,1,-30deg);
44
}
45
 
46
.cube:hover > li:nth-child(2){
47
  box-shadow: -1em -5em 15em 0em #666,
48
              0 0 1.2em 0.1em #333;
49
}
50
 
51
li{
52
  display:block;
53
  position:absolute;
54
  width: 100%;
55
  height: 100%;
56
  overflow: hidden;
57
}
58
 
59
li:nth-child(1){
60
  background:rgba(245,235,235,1);
61
  transform:rotate(0deg) translateZ(@E/2);
62
}
63
 
64
li:nth-child(1)::after {
65
  background-image: -webkit-linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(250,250,250,0) 80%);
66
  content:"";
67
  position: absolute;
68
  top: -50%;
69
  left: -100%;
70
  right: -50%;
71
  bottom: -50%;
72
  transform: rotate3d(0,0,1,-45deg);
73
  transition: all 300ms;
74
}
75
 
76
li:nth-child(2){
77
  //background:rgba(0,0,0,1);
78
  box-shadow: -4em -0.5em 10em 0em #999,
79
              -0.2em 0 2em 0em #333;
80
  transform:rotateX(-90deg) translateZ(@E/2);
81
  transition: box-shadow 600ms;
82
}
83
 
84
li:nth-child(3){
85
  background:rgba(255,255,255,1);
86
  transform:rotateX(90deg) translateZ(@E/2);
87
}
88
 
89
li:nth-child(4){
90
  background:rgba(255,255,255,1);
91
  transform:rotateY(-90deg) translateZ(@E/2);
92
}
93
 
94
li:nth-child(5){
95
  background:rgba(245,235,235,1);
96
  transform:rotateY(90deg) translateZ(@E/2);
97
}
98
 
99
li:nth-child(5)::after {
100
  background-image: -webkit-linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(250,250,250,0) 80%);
101
  content:"";
102
  position: absolute;
103
  top: -50%;
104
  left: -200%;
105
  right: -50%;
106
  bottom: -50%;
107
  transform: rotate3d(0,0,1,0deg);
108
  transition: all 300ms;
109
}
110
 
111
li:nth-child(6){
112
  background:rgba(255,255,255,1);
113
  transform:rotateY(180deg) translateZ(@E/2);
114
}
115
 
116
* {
117
  margin: 0;
118
  padding: 0;
119
}
120
 
121
html {
122
  font-size: 100%;
123
}
124
 
125
ul{
126
  list-style-type:none;
127
  margin:0;
128
  padding:0;
129
}
130
 
131
h1 {
132
  color: rgb(162,123,204);
133
  font-family: "Helvetica", Arial, sans-serif;
134
  font-size: 95%;
135
  text-align: center;
136
  line-height: @H;
137
  width: 100%;
138
}
 

Cube shading

CSSDeck G+