Loader by Deri-Kurniawan

1.loader {
2  perspective: 600px;
3  width: 100px;
4  height: 100px;
5}
6
7.cube {
8  width: 100%;
9  height: 100%;
10  transform-style: preserve-3d;
11  animation: rotate 4s linear infinite;
12}
13
14.face {
15  position: absolute;
16  width: 100%;
17  height: 100%;
18  background: linear-gradient(45deg, #3498db, #e74c3c);
19  opacity: 0.8;
20  border: 0.5px solid #fff;
21}
22
23.face:nth-child(1) {
24  transform: rotateX(90deg) translateZ(50px);
25}
26
27.face:nth-child(2) {
28  transform: rotateX(-90deg) translateZ(50px);
29}
30
31.face:nth-child(3) {
32  transform: translateZ(50px);
33}
34
35.face:nth-child(4) {
36  transform: rotateY(90deg) translateZ(50px);
37}
38
39.face:nth-child(5) {
40  transform: rotateY(-90deg) translateZ(50px);
41}
42
43.face:nth-child(6) {
44  transform: rotateY(180deg) translateZ(50px);
45}
46
47@keyframes rotate {
48  0% {
49    transform: rotateX(0deg) rotateY(0deg);
50  }
51
52  100% {
53    transform: rotateX(360deg) rotateY(360deg);
54  }
55}
56