1
2<div class="card-container">
3  <div class="card">
4    <div class="card-front">
5      Front Content
6    </div>
7    <div class="card-back">
8      Back Content
9    </div>
10  </div>
11</div>
12

1
2.card-container {
3  width: 200px;
4  height: 300px;
5  perspective: 1000px;
6}
7
8.card {
9  position: relative;
10  width: 100%;
11  height: 100%;
12  text-align: center;
13  transition: transform 0.6s;
14  transform-style: preserve-3d;
15  cursor: pointer;
16}
17
18.card-container:hover .card {
19  transform: rotateY(180deg);
20}
21
22.card-front, .card-back {
23  position: absolute;
24  width: 100%;
25  height: 100%;
26  -webkit-backface-visibility: hidden;
27  backface-visibility: hidden;
28  display: flex;
29  align-items: center;
30  justify-content: center;
31  border-radius: 10px;
32}
33
34.card-front {
35  background-color: #3b82f6;
36  color: #ffffff;
37}
38
39.card-back {
40  background-color: #2563eb;
41  color: #ffffff;
42  transform: rotateY(180deg);
43}
44