1.cards {
2  position: relative;
3}
4
5.card {
6  z-index: 1;
7  position: absolute;
8  width: 254px;
9  height: 190px;
10  border-radius: 10px;
11  transition: all .5s ease-out;
12  overflow: hidden;
13  transform: translateX(0px) translateY(0px) perspective(905px) rotateX(0deg) rotateY(0deg) rotateZ(-8deg);
14}
15
16.card.one {
17  top: -120px;
18  left: -150px;
19  background: linear-gradient(180deg, #FF0055 0%, #000066 100%);
20}
21
22.card.two {
23  top: -95px;
24  left: -125px;
25  background: linear-gradient(180deg, #fa00ff 0%, #01f998 99%);
26}
27
28.card.three {
29  top: -70px;
30  left: -100px;
31  background: linear-gradient(180deg, #c0f901 0%, #fa00ff 100%);
32}
33
34.card:hover {
35  z-index: 4;
36  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
37  transition: all .5s ease-out;
38}
39
40.cardDetails {
41  width: 55%;
42  height: 100%;
43  padding: 20px;
44  display: flex;
45  flex-direction: column;
46  justify-content: space-between;
47  align-items: flex-end;
48  background: rgba(0,0,0,0.8);
49  transition: .5s;
50  transform-origin: left;
51  transform: perspective(2000px) rotateY(-90deg);
52}
53
54.card:hover .cardDetails {
55  transform: perspective(2000px) rotateY(0deg);
56}
57
58.cardDetailsHaeder {
59  font-weight: 600;
60  color: #edb899;
61}
62
63.cardDetailsButton {
64  padding: 3px 6px;
65  border-radius: 25px;
66  background-color: #edb899;
67  color: #000;
68  font-weight: 600;
69}