Card by mRcOol7

1.container {
2  height: 100px;
3  display: flex;
4  justify-content: center;
5  align-items: center;
6}
7
8.card {
9  width: 300px;
10  height: 200px;
11  transform-style: preserve-3d;
12  transition: transform 0.5s;
13  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
14}
15
16.card:hover {
17  transform: rotateY(180deg) scale(1.1);
18}
19
20.card-inner {
21  position: relative;
22  width: 100%;
23  height: 100%;
24  transform-style: preserve-3d;
25  transform: rotateY(0deg);
26}
27
28.card-front,
29.card-back {
30  position: absolute;
31  top: 0;
32  left: 0;
33  width: 100%;
34  height: 100%;
35  backface-visibility: hidden;
36  display: flex;
37  justify-content: center;
38  align-items: center;
39  border-radius: 10px;
40  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
41}
42
43.card-front {
44  background: linear-gradient(to bottom right, #67b26f, #4ca2cd);
45  transform: rotateY(0deg);
46  box-shadow: 0 0 20px rgba(103, 178, 111, 0.5);
47}
48
49.card-back {
50  background: linear-gradient(to bottom right, #fccb90, #d57eeb);
51  transform: rotateY(180deg);
52  box-shadow: 0 0 20px rgba(252, 203, 144, 0.5);
53}
54