1.wrapper {
2  perspective: 1000px;
3}
4.cube {
5  position: relative;
6  width: 200px;
7  height: 200px;
8  transform-style: preserve-3d;
9  animation: animate 4s linear infinite;
10}
11.side {
12  position: absolute;
13  width: 200px;
14  height: 200px;
15  display: grid;
16  background-color: #01b4f9;
17  border-radius: 10px;
18  place-content: center;
19  border: 3px solid #fff;
20}
21
22.front {
23  transform: translateZ(100px);
24}
25.back {
26  transform: rotateY(180deg) translateZ(100px);
27}
28.top {
29  transform: rotateX(90deg) translateZ(100px);
30}
31.bottom {
32  transform: rotateX(-90deg) translateZ(100px);
33}
34.left {
35  transform: rotateY(-90deg) translateZ(100px);
36}
37.right {
38  transform: rotateY(90deg) translateZ(100px);
39}
40
41@keyframes animate {
42  0% {
43    transform: rotateX(0deg) rotateY(0deg);
44  }
45  100% {
46    transform: rotateX(360deg) rotateY(360deg);
47  }
48}
49