style.css

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 5rem;
  font-size: 16px;
}

:root {
  --card-width: 15rem;
  --card-hegiht: 20rem;

  --front-background: rgba(0, 0, 0, 0.005);
  --back-background: rgba(0, 0, 0, 0.005);
}

.card {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  width: var(--card-width, 15rem);
  height: var(--card-height, 30rem);
}

.card__content {
  position: relative;

  display: grid;
  place-items: center;

  padding: 5rem;

  transition: transform 1s ease-in-out;
  transform-style: preserve-3d;

  text-align: center;
}

.card:hover .card__content {
  transform: rotateY(0.5turn);
}

.card__front,
.card__back {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: grid;
  place-items: center;
  align-content: center;

  padding: 2rem;
  backface-visibility: hidden;
  height: var(--card-hegiht);

  /* border: 1px solid rgba(0, 0, 0, 0.1); */
  box-shadow: 0 0 1.5px rgba(0, 0, 0, 0.3);
}

.card__front {
  background: var(--front-background);
}

.card__back {
  transform: rotateY(0.5turn);
  background: var(--back-background);
}