1.cube {
2  position: relative;
3  width: 300px;
4  height: 300px;
5  transform-style: preserve-3d;
6  transform: rotateX(-30deg);
7  animation: animateD 8s linear infinite;
8}
9
10@keyframes animateD {
11  0% {
12    transform: rotateX(-15deg) rotateY(0deg);
13  }
14
15  100% {
16    transform: rotateX(-15deg) rotateY(-360deg);
17  }
18}
19
20.cube div {
21  position: absolute;
22  top: 0;
23  left: 0;
24  width: 100%;
25  height: 100%;
26  transform-style: preserve-3d;
27}
28
29.cube2 {
30  position: relative;
31  width: 150px;
32  height: 150px;
33  transform-style: preserve-3d;
34  animation: animateD2 5s ease-out infinite alternate;
35}
36
37@keyframes animateD2 {
38  0% {
39    transform: rotateX(0deg) rotateY(0deg);
40  }
41
42  100% {
43    transform: rotateX(180deg) rotateY(-360deg);
44  }
45}
46
47.cube2 div {
48  position: absolute;
49  top: 35px;
50  left: 0;
51  width: 65%;
52  height: 65%;
53  transform-style: preserve-3d;
54}
55
56.cube2 div span {
57  position: absolute;
58  top: 20%;
59  left: 20%;
60  width: 65%;
61  height: 65%;
62  background: transparent;
63  border: 2px solid #7dff99;
64  transform: rotateY(calc(90deg * var(--i))) translateZ(62px);
65}
66
67.cube3 {
68  position: absolute;
69  width: 300px;
70  height: 300px;
71  transform-style: preserve-3d;
72  transform: rotateX(-30deg);
73  animation: animateD3 1s ease-in-out infinite alternate;
74}
75
76@keyframes animateD3 {
77  0% {
78    transform: rotateX(-90deg) rotateY(0deg);
79  }
80
81  100% {
82    transform: rotateX(90deg) rotateY(45deg);
83  }
84}
85
86.cube3 div {
87  position: absolute;
88  top: 70px;
89  left: 70px;
90  width: 15%;
91  height: 15%;
92  transform-style: preserve-3d;
93}
94
95.cube3 div span {
96  position: absolute;
97  top: 0;
98  left: 0;
99  width: 100%;
100  height: 100%;
101  background: #7dff99;
102  transform: rotateY(calc(90deg * var(--i))) translateZ(14px);
103  box-shadow: 0px 0px 7px #7dff99;
104}
105
106.top3 {
107  position: absolute;
108  top: 0;
109  left: 0;
110  background: #7dff99;
111  transform: rotateX(90deg) translateZ(14px);
112  box-shadow: 0px 0px 10px #7dff99;
113}
114
115