1.card {
2  width: 12rem;
3  cursor: pointer;
4}
5
6.content {
7  text-align: center;
8  position: relative;
9  transition: all 2.25s;
10  background-color: rgb(127, 204, 240);
11  padding: 5em;
12  transform-style: preserve-3d;
13}
14
15.card:hover .content {
16  transform: rotateY(0.5turn);
17}
18
19.front,
20.back {
21  position: absolute;
22  top: 0;
23  left: 0;
24  bottom: 0;
25  right: 0;
26  padding: 2em;
27  transform-style: preserve-3d;
28  backface-visibility: hidden;
29}
30
31.title {
32  transform: translateZ(5rem);
33  font-size: 2rem;
34}
35
36.subtitle {
37  transform: translateZ(2rem);
38}
39
40.back {
41  transform: rotateY(0.5turn);
42  background-color: #009bff;
43}
44
45.description {
46  transform: translateZ(3rem);
47}
48