1.flip {
2  box-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
3  padding: 1em;
4  width: 190px;
5  height: 254px;
6  transform-style: preserve-3d;
7  transition: 3s ease;
8}
9
10.flip:hover {
11  transform: rotateY(180deg);
12}
13/* Content */
14.flip .content {
15  transform-style: preserve-3d;
16}
17
18.flip .back, .flip .front {
19  transform-style: preserve-3d;
20  backface-visibility: hidden;
21  display: flex;
22  flex-direction: column;
23}
24
25.flip .back {
26  transform: rotateY(180deg);
27  position: absolute;
28  top: 0;
29  left: 0;
30  right: 0;
31  bottom: 0;
32}
33
34.flip h2,
35.flip p {
36  transform: translateZ(90px);
37  text-shadow: 0 0 3px black;
38  text-align: center;
39}
40
41.flip h2 {
42  font-size: 3em;
43  color: #fff;
44  letter-spacing: 1px;
45}
46
47.flip p {
48  font-size: 1em;
49  color: #eee;
50  line-height: 1.6em;
51}
52
53.flip::before,
54.flip::after {
55  content: "";
56  top: 0;
57  left: 0;
58  right: 0;
59  bottom: 0;
60  position: absolute;
61  background-image: linear-gradient(purple, red);
62  background-position: center center;
63  background-repeat: no-repeat;
64  background-size: cover;
65  transform: rotateY(180deg)translateZ(1px);
66}
67
68.flip::before {
69  transform: none;
70  background-image: linear-gradient(violet, orange);
71  background-position: center center;
72  background-repeat: no-repeat;
73  background-size: cover;
74}