1.loader-container {
2  perspective: 800px;
3}
4
5.loader {
6  position: relative;
7  width: 80px;
8  height: 80px;
9  transform-style: preserve-3d;
10  animation: spin 3s linear infinite;
11}
12
13.face {
14  position: absolute;
15  width: 100%;
16  height: 100%;
17  background-color: #2196F3;
18  border: 2px solid #1976D2;
19}
20
21.front {
22  transform: translateZ(40px);
23}
24
25.back {
26  transform: rotateY(180deg) translateZ(40px);
27}
28
29.left {
30  transform: rotateY(-90deg) translateZ(40px);
31}
32
33.right {
34  transform: rotateY(90deg) translateZ(40px);
35}
36
37.top {
38  transform: rotateX(90deg) translateZ(40px);
39}
40
41.bottom {
42  transform: rotateX(-90deg) translateZ(40px);
43}
44
45@keyframes spin {
46  0% {
47    transform: rotateX(0) rotateY(0) rotateZ(0);
48  }
49
50  100% {
51    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
52  }
53}
54