1.card {
2  width: 300px;
3  height: 200px;
4  perspective: 1000px;
5}
6
7.card-inner {
8  width: 100%;
9  height: 100%;
10  position: relative;
11  transform-style: preserve-3d;
12  transition: transform 0.999s;
13}
14
15.card:hover .card-inner {
16  transform: rotateY(180deg);
17}
18
19.card-front,
20.card-back {
21  position: absolute;
22  width: 100%;
23  height: 100%;
24  backface-visibility: hidden;
25}
26
27.card-front {
28  background-color: #6A2C70;
29  color: #fff;
30  display: flex;
31  align-items: center;
32  border: 10px solid #6A2C70;
33  border-radius: 10px;
34  justify-content: center;
35  font-size: 24px;
36  transform: rotateY(0deg);
37}
38
39.card-back {
40  background-color: #F08A5D;
41  color: #fff;
42  display: flex;
43  align-items: center;
44  border: 10px solid #F08A5D;
45  border-radius: 10px;
46  justify-content: center;
47  font-size: 24px;
48  transform: rotateY(180deg);
49}
50