1.card {
2  width: 300px;
3  height: 200px;
4  background-color: #4158D0;
5  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
6  border-radius: 8px;
7  color: white;
8  overflow: hidden;
9  position: relative;
10  transform-style: preserve-3d;
11  perspective: 1000px;
12  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
13  cursor: pointer;
14}
15
16.card-content {
17  padding: 20px;
18  position: relative;
19  z-index: 1;
20  display: flex;
21  flex-direction: column;
22  gap: 10px;
23  color: white;
24  align-items: center;
25  justify-content: center;
26  text-align: center;
27  height: 100%;
28}
29
30.card-content .card-title {
31  font-size: 24px;
32  font-weight: 700;
33  color: inherit;
34  text-transform: uppercase;
35}
36
37.card-content .card-para {
38  color: inherit;
39  opacity: 0.8;
40  font-size: 14px;
41}
42
43.card:hover {
44  transform: rotateY(10deg) rotateX(10deg) scale(1.05);
45  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
46}
47
48.card:before {
49  content: "";
50  position: absolute;
51  top: 0;
52  left: 0;
53  width: 100%;
54  height: 100%;
55  background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
56  transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
57  z-index: 1;
58}
59
60.card:hover:before {
61  transform: translateX(-100%);
62}
63
64.card:after {
65  content: "";
66  position: absolute;
67  top: 0;
68  right: 0;
69  width: 100%;
70  height: 100%;
71  background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
72  transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
73  z-index: 1;
74}
75
76.card:hover:after {
77  transform: translateX(100%);
78}
79
80
81
82
83
84