Card by ElsayedShamsEldeen

1.cube-container {
2  width: 200px;
3  height: 200px;
4  perspective: 800px;
5  margin: 50px auto;
6}
7
8.cube {
9  position: relative;
10  width: 100%;
11  height: 100%;
12  transform-style: preserve-3d;
13  animation: rotate 15s infinite linear;
14}
15
16.face {
17  position: absolute;
18  width: 200px;
19  height: 200px;
20  color: rgb(21, 153, 214);
21  font-size: 18px;
22  text-align: center;
23  line-height: 200px;
24  background: transparent;
25  opacity: 0.9;
26  border: 2px solid;
27  border-image: linear-gradient(
28    90deg,
29    rgba(14, 8, 110, 1) 0%,
30    rgba(15, 15, 167, 1) 26%,
31    rgba(20, 45, 255, 1) 85%
32  );
33  box-shadow: 0 0 100px rgba(8, 178, 245, 0.61);
34}
35
36.front {
37  transform: translateZ(100px);
38  background-color: #0093e9;
39  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
40}
41
42.back {
43  transform: rotateY(180deg) translateZ(100px);
44  background-color: #0093e9;
45  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
46}
47
48.right {
49  transform: rotateY(90deg) translateZ(100px);
50  background-color: #0093e9;
51  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
52}
53
54.left {
55  transform: rotateY(-90deg) translateZ(100px);
56  background-color: #0093e9;
57  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
58}
59
60.top {
61  transform: rotateX(90deg) translateZ(100px);
62  background-color: #0093e9;
63  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
64}
65
66.bottom {
67  transform: rotateX(-90deg) translateZ(100px);
68  background-color: #0093e9;
69  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
70}
71
72.cube-container:hover .cube {
73  animation-play-state: paused;
74}
75
76@keyframes rotate {
77  0% {
78    transform: rotateX(0) rotateY(0) rotateZ(0);
79  }
80
81  100% {
82    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
83  }
84}
85