Ajax Loader
HTML 
<div id="container">
1
<div id="container">
2
  <div id="cube">
3
    <div class="back"></div>
4
    <div class="left"></div>
5
    <div class="bottom"></div>
6
    <div class="top"></div>
7
    <div class="right"></div>
8
    <div class="front"></div>
9
  </div>
10
</div>
 
CSS 
/* Use a find a replace tool to change the dimensions */
1
/* Use a find a replace tool to change the dimensions */
2
body { background-color:black; }
3
#container { width:100%; -webkit-perspective:800px; perspective:800px; position:relative; }
4
#cube {
5
  position:relative; margin:0 auto; top:170px; width:200px; height:200px;
6
  -webkit-transform-style: preserve-3d;
7
  transform-style: preserve-3d;
8
  -webkit-transform: rotateX(-5deg) rotateY(-30deg);
9
  transform: rotateX(-5deg) rotateY(-30deg);
10
}
11
#cube > div {
12
  position:absolute; width:200px; height:200px;
13
  border:1px solid white;
14
  /*background:red; /* Remove the first /* to see the trick */
15
}
16
#cube .front {
17
  -webkit-transform: translateZ(100px);
18
  transform: translateZ(100px);
19
  -webkit-animation:front 5s linear infinite;
20
  animation:front 5s linear infinite;
21
}
22
#cube .back {
23
  -webkit-transform: rotateY(180deg) translateZ(100px);
24
  transform: rotateY(180deg) translateZ(100px);
25
  -webkit-animation:back 5s linear infinite;
26
  animation:back 5s linear infinite;
27
}
28
#cube .right {
29
  -webkit-transform: rotateY(90deg) translateZ(100px);
30
  transform: rotateY(90deg) translateZ(100px);
31
  -webkit-animation:right 5s linear infinite;
32
  animation:right 5s linear infinite;
33
}
34
#cube .left {
35
  -webkit-transform: rotateY(270deg) translateZ(100px);
36
  transform: rotateY(270deg) translateZ(100px);
37
  -webkit-animation:left 5s linear infinite;
38
  animation:left 5s linear infinite;
39
}
40
#cube .top {
41
  -webkit-transform: rotateX(90deg) translateZ(100px);
42
  transform: rotateX(90deg) translateZ(100px);
43
  -webkit-animation:top 5s linear infinite;
44
  animation:top 5s linear infinite;
45
}
46
#cube .bottom {
47
  -webkit-transform: rotateX(270deg) rotateY(0deg) translateZ(100px);
48
  transform: rotateX(270deg) rotateY(0deg) translateZ(100px);
49
  -webkit-animation:bottom 5s linear infinite;
50
  animation:bottom 5s linear infinite;
51
}
52
 
53
@keyframes front {
54
  50%  { transform:rotateY(-180deg) translateZ(-100px); opacity:1; }
55
  50.001%  { opacity:0; }
56
  99.999% { opacity:0; }
57
  100% { opacity:1; }
58
}
59
@keyframes back {
60
  25% { transform:rotateY(90deg) translateX(100px) translateZ(-50px); }
61
  50%  { transform:rotateY(0deg) translateZ(-100px); opacity:1; }
62
  50.001%  { opacity:0; }
63
  99.999% { opacity:0; }
64
  100% { opacity:1; }
65
}
66
@keyframes right {
67
  25% { transform: rotateY(0deg) translateZ(-50px) translateX(100px); }
68
  50% { transform: rotateY(-90deg) translateZ(-100px); }
69
  50.001% { transform: rotateY(90deg) translateZ(100px); }
70
  100% { transform: rotateY(90deg) rotateX(-180deg) translateZ(-100px); }
71
}
72
@keyframes left {
73
  25% { transform: rotateY(180deg) translateZ(-50px) translateX(100px); }
74
  50% { transform: rotateY(90deg) translateZ(-100px); }
75
  50.001% { transform: rotateY(270deg) translateZ(100px); }
76
  100% { transform: rotateY(270deg) rotateX(180deg) translateZ(-100px); }
77
}
78
@keyframes top {
79
  0% { opacity:0; }
80
  49.999% { opacity:0; }
81
  50% { transform: rotateX(90deg) translateZ(100px); opacity:1; }
82
  100% { transform: rotateX(90deg) rotateY(180deg) translateZ(-100px); }
83
}
84
@keyframes bottom {
85
  0% { opacity:0; }
86
  49.999% { opacity:0; }
87
  50% { transform: rotateX(270deg) rotateY(0deg) translateZ(100px); opacity:1; }
88
  75% { transform: rotateX(270deg) rotateY(-90deg) translateX(100px) translateZ(-50px); }
89
  100% { transform: rotateX(270deg) rotateY(-180deg) translateZ(-100px); }
90
}
91
 
92
 
93
 
94
@-webkit-keyframes front {
95
  50%  { -webkit-transform:rotateY(-180deg) translateZ(-100px); opacity:1; }
96
  50.001%  { opacity:0; }
97
  99.999% { opacity:0; }
98
  100% { opacity:1; }
99
}
100
@-webkit-keyframes back {
101
  25% { -webkit-transform:rotateY(90deg) translateX(100px) translateZ(-50px); }
102
  50%  { -webkit-transform:rotateY(0deg) translateZ(-100px); opacity:1; }
103
  50.001%  { opacity:0; }
104
  99.999% { opacity:0; }
105
  100% { opacity:1; }
106
}
107
@-webkit-keyframes right {
108
  25% { -webkit-transform: rotateY(0deg) translateZ(-50px) translateX(100px); }
109
  50% { -webkit-transform: rotateY(-90deg) translateZ(-100px); }
110
  50.001% { -webkit-transform: rotateY(90deg) translateZ(100px); }
111
  100% { -webkit-transform: rotateY(90deg) rotateX(-180deg) translateZ(-100px); }
112
}
113
@-webkit-keyframes left {
114
  25% { -webkit-transform: rotateY(180deg) translateZ(-50px) translateX(100px); }
115
  50% { -webkit-transform: rotateY(90deg) translateZ(-100px); }
116
  50.001% { -webkit-transform: rotateY(270deg) translateZ(100px); }
117
  100% { -webkit-transform: rotateY(270deg) rotateX(180deg) translateZ(-100px); }
118
}
119
@-webkit-keyframes top {
120
  0% {  opacity:0; }
121
  49.999% { opacity:0; }
122
  50% { -webkit-transform: rotateX(90deg) translateZ(100px); opacity:1; }
123
  100% { -webkit-transform: rotateX(90deg) rotateY(180deg) translateZ(-100px); }
124
}
125
@-webkit-keyframes bottom {
126
  0% { opacity:0; }
127
  49.999% { opacity:0; }
128
  50% { -webkit-transform: rotateX(270deg) rotateY(0deg) translateZ(100px); opacity:1; }
129
  75% { -webkit-transform: rotateX(270deg) rotateY(-90deg) translateX(100px) translateZ(-50px); }
130
  100% { -webkit-transform: rotateX(270deg) rotateY(-180deg) translateZ(-100px); }
131
}
 

Cube Side Rotation

CSSDeck G+