Loader by JkHuger

1.cube {
2  top: -100px;
3  margin: 200px auto 0;
4  width: 100px;
5  height: 100Px;
6  position: relative;
7  transform-style: preserve-3d;
8  animation: spin 3s infinite cubic-bezier(0.16, 0.61, 0.49, 0.91);
9}
10
11.face {
12  position: absolute;
13  width: 100%;
14  height: 100%;
15  background: rgb(67, 191, 207);
16  border: 2px solid #fff;
17  border-radius: 5px;
18  box-shadow: 0 0 15px #fff;
19}
20
21.top {
22  transform: rotateX(90deg) translateZ(50px);
23  animation: shift-top 3s infinite ease-out;
24}
25
26.bottom {
27  transform: rotateX(-90deg) translateZ(50px);
28  animation: shift-bottom 3s infinite ease-out;
29}
30
31.right {
32  transform: rotateY(90deg) translateZ(50px);
33  animation: shift-right 3s infinite ease-out;
34}
35
36.left {
37  transform: rotateY(-90deg) translateZ(50px);
38  animation: shift-left 3s infinite ease-out;
39}
40
41.front {
42  transform: translateZ(50px);
43  animation: shift-front 3s infinite ease-out;
44}
45
46.back {
47  transform: rotateY(-180deg) translateZ(50px);
48  animation: shift-back 3s infinite ease-out;
49}
50
51@keyframes spin {
52  33% {
53    transform: rotateX(-36deg) rotateY(-405deg);
54  }
55
56  100% {
57    transform: rotateX(-36deg) rotateY(-405deg);
58  }
59}
60
61@keyframes shift-top {
62  33% {
63    transform: rotateX(90deg) translateZ(50px);
64  }
65
66  50% {
67    transform: rotateX(90deg) translateZ(100px);
68  }
69
70  60% {
71    transform: rotateX(90deg) translateZ(100px);
72  }
73
74  75% {
75    transform: rotateX(90deg) translateZ(50px);
76  }
77}
78
79@keyframes shift-bottom {
80  33% {
81    transform: rotateX(-90deg) translateZ(50px);
82  }
83
84  50% {
85    transform: rotateX(-90deg) translateZ(100px);
86  }
87
88  60% {
89    transform: rotateX(-90deg) translateZ(100px);
90  }
91
92  75% {
93    transform: rotateX(-90deg) translateZ(50px);
94  }
95}
96
97@keyframes shift-right {
98  33% {
99    transform: rotateY(90deg) translateZ(50px);
100  }
101
102  50% {
103    transform: rotateY(90deg) translateZ(100px);
104  }
105
106  60% {
107    transform: rotateY(90deg) translateZ(100px);
108  }
109
110  75% {
111    transform: rotateY(90deg) translateZ(50px);
112  }
113}
114
115@keyframes shift-left {
116  33% {
117    transform: rotateY(-90deg) translateZ(50px);
118  }
119
120  50% {
121    transform: rotateY(-90deg) translateZ(100px);
122  }
123
124  60% {
125    transform: rotateY(-90deg) translateZ(100px);
126  }
127
128  75% {
129    transform: rotateY(-90deg) translateZ(50px);
130  }
131}
132
133@keyframes shift-front {
134  33% {
135    transform: translateZ(50px);
136  }
137
138  50% {
139    transform: translateZ(100px);
140  }
141
142  60% {
143    transform: translateZ(100px);
144  }
145
146  75% {
147    transform: translateZ(50px);
148  }
149}
150
151@keyframes shift-back {
152  33% {
153    transform: rotateY(-180deg) translateZ(50px);
154  }
155
156  50% {
157    transform: rotateY(-180deg) translateZ(100px);
158  }
159
160  60% {
161    transform: rotateY(-180deg) translateZ(100px);
162  }
163
164  75% {
165    transform: rotateY(-180deg) translateZ(50px);
166  }
167}