1.loader {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  height: 100%;
6}
7
8.cube {
9  width: 100px;
10  height: 100px;
11  position: relative;
12  transform-style: preserve-3d;
13  animation: spin 2s infinite linear;
14}
15
16.side {
17  position: absolute;
18  width: 100px;
19  height: 100px;
20  opacity: 0.8;
21}
22
23.front {
24  transform: translateZ(50px);
25  background: linear-gradient(45deg, #ff4e50, #f9d423);
26}
27
28.back {
29  transform: translateZ(-50px);
30  background: linear-gradient(45deg, #40e0d0, #ff8c00);
31}
32
33.top {
34  transform: rotateX(90deg) translateZ(50px);
35  background: linear-gradient(45deg, #800080, #00bfff);
36}
37
38.bottom {
39  transform: rotateX(90deg) translateZ(-50px);
40  background: linear-gradient(45deg, #008000, #ffff00);
41}
42
43.left {
44  transform: rotateY(90deg) translateZ(50px);
45  background: linear-gradient(45deg, #0000ff, #ff1493);
46}
47
48.right {
49  transform: rotateY(90deg) translateZ(-50px);
50  background: linear-gradient(45deg, #00ffff, #ff0000);
51}
52
53@keyframes spin {
54  0% {
55    transform: rotateX(0deg) rotateY(0deg);
56  }
57
58  100% {
59    transform: rotateX(360deg) rotateY(360deg);
60  }
61}