Card by Saad3092003

1.one-div {
2  position: relative;
3  height: 250px;
4  width: 200px;
5  background-color: rgb(15, 15, 15);
6  transform-style: preserve-3d;
7  animation: rot 2s infinite ease;
8  border-radius: 20px;
9  box-shadow: 0 0 50px 0px white ,inset 0 0 50px 0px white;
10  transition: 1s;
11}
12
13.one-div::after {
14  content: 'D I V';
15  font-size: 30px;
16  text-shadow: 5px 5px 1px black;
17  position: absolute;
18  top: 0;
19  left: 0;
20  height: 100%;
21  width: 100%;
22  display: flex;
23  justify-content: center;
24  align-items: center;
25  transition: all 0.5s;
26  color: white;
27}
28
29.one-div:hover.one-div::after {
30  font-size: 40px;
31}
32
33.one-div::before {
34  content: 'UIVERSE';
35  color: white;
36  font-size: 25px;
37  letter-spacing: 7px;
38  display: flex;
39  justify-content: center;
40  align-items: center;
41  position: absolute;
42  top: -20px;
43  left: 40px;
44  background-color: rgb(25, 25, 25);
45  width: 220px;
46  height: 270px;
47  transform: translateY(50px) translateZ(50px);
48  border-radius: 20px;
49  filter: blur(0px);
50  transition: 0.5s;
51  box-shadow: 0 0 5px 0px black, -3px -3px 10px 3px rgb(25,25,25),inset 0px 0px 40px -20px black;
52}
53
54.one-div:active.one-div::after {
55  text-shadow: 0 0 0 black;
56  transition: 0.5s;
57  transform: translateY(5px) translateZ(5px);
58}
59
60.one-div:hover.one-div::before {
61  font-size: 10px;
62  width: 250px;
63  height: 300px;
64  transform: translateZ(-50px) translateY(50px);
65  box-shadow: 0 0 5px 0px black, -3px -3px 10px 3px rgb(25,25,25),inset 0px 0px 40px -20px;
66}
67
68.one-div:hover {
69  height: 300px;
70  width: 250px;
71  box-shadow: 0 0 5px 0px black,inset -3px -3px 10px 3px rgb(25,25,25),inset 3px 3px 20px 3px black;
72  cursor: pointer;
73}
74
75@keyframes rot {
76  0% {
77    transform: rotateX(-15deg) translateY(0px);
78  }
79
80  50% {
81    transform: rotateX(-15deg) translateY(-10px);
82  }
83
84  100% {
85    transform: rotateX(-15deg) translateY(0px);
86  }
87}
88