1.boxes {
2  --size: 32px;
3  --duration: 800ms;
4  height: calc(var(--size) * 2);
5  width: calc(var(--size) * 3);
6  position: relative;
7  transform-style: preserve-3d;
8  transform-origin: 50% 50%;
9  margin-top: calc(var(--size) * 1.5 * -1);
10  transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
11}
12
13.boxes .box {
14  width: var(--size);
15  height: var(--size);
16  top: 0;
17  left: 0;
18  position: absolute;
19  transform-style: preserve-3d;
20}
21
22.boxes .box:nth-child(1) {
23  transform: translate(100%, 0);
24  -webkit-animation: box1 var(--duration) linear infinite;
25  animation: box1 var(--duration) linear infinite;
26}
27
28.boxes .box:nth-child(2) {
29  transform: translate(0, 100%);
30  -webkit-animation: box2 var(--duration) linear infinite;
31  animation: box2 var(--duration) linear infinite;
32}
33
34.boxes .box:nth-child(3) {
35  transform: translate(100%, 100%);
36  -webkit-animation: box3 var(--duration) linear infinite;
37  animation: box3 var(--duration) linear infinite;
38}
39
40.boxes .box:nth-child(4) {
41  transform: translate(200%, 0);
42  -webkit-animation: box4 var(--duration) linear infinite;
43  animation: box4 var(--duration) linear infinite;
44}
45
46.boxes .box > div {
47  --background: #5C8DF6;
48  --top: auto;
49  --right: auto;
50  --bottom: auto;
51  --left: auto;
52  --translateZ: calc(var(--size) / 2);
53  --rotateY: 0deg;
54  --rotateX: 0deg;
55  position: absolute;
56  width: 100%;
57  height: 100%;
58  background: var(--background);
59  top: var(--top);
60  right: var(--right);
61  bottom: var(--bottom);
62  left: var(--left);
63  transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
64}
65
66.boxes .box > div:nth-child(1) {
67  --top: 0;
68  --left: 0;
69}
70
71.boxes .box > div:nth-child(2) {
72  --background: #145af2;
73  --right: 0;
74  --rotateY: 90deg;
75}
76
77.boxes .box > div:nth-child(3) {
78  --background: #447cf5;
79  --rotateX: -90deg;
80}
81
82.boxes .box > div:nth-child(4) {
83  --background: #DBE3F4;
84  --top: 0;
85  --left: 0;
86  --translateZ: calc(var(--size) * 3 * -1);
87}
88
89@-webkit-keyframes box1 {
90  0%, 50% {
91    transform: translate(100%, 0);
92  }
93
94  100% {
95    transform: translate(200%, 0);
96  }
97}
98
99@keyframes box1 {
100  0%, 50% {
101    transform: translate(100%, 0);
102  }
103
104  100% {
105    transform: translate(200%, 0);
106  }
107}
108
109@-webkit-keyframes box2 {
110  0% {
111    transform: translate(0, 100%);
112  }
113
114  50% {
115    transform: translate(0, 0);
116  }
117
118  100% {
119    transform: translate(100%, 0);
120  }
121}
122
123@keyframes box2 {
124  0% {
125    transform: translate(0, 100%);
126  }
127
128  50% {
129    transform: translate(0, 0);
130  }
131
132  100% {
133    transform: translate(100%, 0);
134  }
135}
136
137@-webkit-keyframes box3 {
138  0%, 50% {
139    transform: translate(100%, 100%);
140  }
141
142  100% {
143    transform: translate(0, 100%);
144  }
145}
146
147@keyframes box3 {
148  0%, 50% {
149    transform: translate(100%, 100%);
150  }
151
152  100% {
153    transform: translate(0, 100%);
154  }
155}
156
157@-webkit-keyframes box4 {
158  0% {
159    transform: translate(200%, 0);
160  }
161
162  50% {
163    transform: translate(200%, 100%);
164  }
165
166  100% {
167    transform: translate(100%, 100%);
168  }
169}
170
171@keyframes box4 {
172  0% {
173    transform: translate(200%, 0);
174  }
175
176  50% {
177    transform: translate(200%, 100%);
178  }
179
180  100% {
181    transform: translate(100%, 100%);
182  }
183}