Card by MuhammadHasann

1.card_container {
2  --X: 0deg;
3  --Y: 0deg;
4  --Z: 0deg;
5  --angleX: 15deg;
6  --angleY: 20deg;
7
8  cursor: pointer;
9
10  position: relative;
11}
12
13.card_hover {
14  position: absolute;
15  z-index: 10;
16  top: 0;
17  left: 0;
18
19  display: flex;
20  flex-wrap: wrap;
21
22  width: 100%;
23  height: 100%;
24}
25
26.card_hover .part {
27  width: 20%;
28  height: calc(100% / 3);
29  background-color: transparent;
30}
31
32.card_container:has(.part-1:hover) {
33  --X: var(--angleX);
34  --Y: calc(var(--angleY) * -1);
35}
36.card_container:has(.part-2:hover) {
37  --X: var(--angleX);
38  --Y: calc((var(--angleY) / 2) * -1);
39}
40.card_container:has(.part-3:hover) {
41  --X: var(--angleX);
42}
43.card_container:has(.part-4:hover) {
44  --X: var(--angleX);
45  --Y: calc(var(--angleY) / 2);
46}
47.card_container:has(.part-5:hover) {
48  --X: var(--angleX);
49  --Y: var(--angleY);
50}
51.card_container:has(.part-6:hover) {
52  --Y: calc(var(--angleY) * -1);
53}
54.card_container:has(.part-7:hover) {
55  --Y: calc((var(--angleY) / 2) * -1);
56}
57.card_container:has(.part-9:hover) {
58  --Y: calc(var(--angleY) / 2);
59}
60.card_container:has(.part-10:hover) {
61  --Y: var(--angleY);
62}
63.card_container:has(.part-11:hover) {
64  --X: calc(var(--angleX) * -1);
65  --Y: calc(var(--angleY) * -1);
66}
67.card_container:has(.part-12:hover) {
68  --X: calc(var(--angleX) * -1);
69  --Y: calc((var(--angleY) / 2) * -1);
70}
71.card_container:has(.part-13:hover) {
72  --X: calc(var(--angleX) * -1);
73}
74.card_container:has(.part-14:hover) {
75  --X: calc(var(--angleX) * -1);
76  --Y: calc(var(--angleY) / 2);
77}
78.card_container:has(.part-15:hover) {
79  --X: calc(var(--angleX) * -1);
80  --Y: var(--angleY);
81}
82
83.card {
84  --light: #d9d9d9;
85  --dark: #1f1f1f;
86
87  position: relative;
88
89  display: flex;
90  flex-direction: column;
91  gap: 0.75rem;
92
93  padding: 1.5rem;
94  width: 15rem;
95  background-color: rgb(172, 250, 233);
96  background-image: linear-gradient(
97    135deg,
98    rgba(172, 250, 233, 1) 0%,
99    rgba(213, 143, 235, 1) 50%,
100    rgba(242, 126, 241, 1) 100%
101  );
102
103  border-radius: 0.5rem;
104
105  transform-origin: center;
106  transform: rotateX(var(--X)) rotateY(var(--Y)) rotateZ(var(--Z));
107  transition: transform 0.3s ease-in-out;
108}
109
110.say-hi {
111  position: relative;
112
113  width: 100%;
114  height: 2rem;
115  background-color: transparent;
116}
117
118.icon_say-hi {
119  position: absolute;
120  bottom: 0;
121  left: -0.5rem;
122
123  width: 3rem;
124
125  opacity: 0;
126  transform-origin: 60% 90%;
127  transform: translate(-15deg);
128  filter: drop-shadow(0 0 0.5rem #2b2b2b);
129  transition: all 0.2s ease-in-out;
130}
131
132.card_container:hover .card .icon_say-hi {
133  width: 3.5rem;
134
135  opacity: 1;
136  animation: say-hi 0.35s linear infinite alternate;
137}
138
139@keyframes say-hi {
140  to {
141    transform: rotate(25deg);
142  }
143}
144
145.title {
146  overflow: clip;
147
148  width: 100%;
149
150  font-size: 1rem;
151  font-weight: 600;
152  color: var(--dark);
153  text-transform: capitalize;
154  text-wrap: nowrap;
155  text-overflow: ellipsis;
156}
157
158.paragraph {
159  font-size: 0.5rem;
160  font-weight: 600;
161  color: var(--dark);
162}
163