.flip-card
  .flip-card-inner
    .flip-card-front
      .back-container
        .back-oval
        .text UNO
    .flip-card-back
      .container.green
        .oval
        .number 8
.flip-card
  .flip-card-inner
    .flip-card-front
      .back-container
        .back-oval
        .text UNO
    .flip-card-back
      .container.yellow
        .oval
        .number 8
.flip-card
  .flip-card-inner
    .flip-card-front
      .back-container
        .back-oval
        .text UNO
    .flip-card-back
      .container.red
        .oval
        .number 8
.flip-card
  .flip-card-inner
    .flip-card-front
      .back-container
        .back-oval
        .text UNO
    .flip-card-back
      .container.blue
        .oval
        .number 8
View Compiled
body {
  transform: scale(0.8, 0.8);
  height: 100vh;
  width: 100vw;
  background-color: #dedede;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.container {
  z-index: 2;
  border-radius: 10px;
  height: 450px;
  width: 300px;
  border: 20px solid white;
}

.back-container {
  border-radius: 10px;
  height: 450px;
  width: 300px;
  border: 20px solid white;
  background-color: #121212;
}

.back-oval {
  position: relative;
  left: 20px;
  top: 20px;
  width: 260px;
  height: 400px;
  background: #c42335;
  transform: rotate(30deg);
  border-radius: 260px / 400px;
}

.container::before {
  content: "8";
  position: absolute;
  font-family: helvetica;
  position: relative;
  font-size: 4em;
  left: -40%;
  color: #fefefe;
  text-shadow: 2px 2px #232323;
}

.container::after {
  content: "8";
  position: absolute;
  font-family: helvetica;
  position: relative;
  font-size: 4em;
  top: -410px;
  left: 40%;
  color: #fefefe;
  text-shadow: 2px 2px #232323;
}

.red {
  background-color: #c42335;
  color: #c42335;
}

.green {
  background-color: #62a92d;
  color: #62a92d;
}

.yellow {
  background-color: #ebce2c;
  color: #ebce2c;
}

.blue {
  background-color: #0158a8;
  color: #0158a8;
}

.oval {
  position: relative;
  left: 20px;
  top: -50px;
  width: 260px;
  height: 400px;
  background: #ffffff;
  transform: rotate(30deg);
  border-radius: 260px / 400px;
}

.number {
  font-family: helvetica;
  position: relative;
  font-size: 17em;
  text-shadow: 5px 5px #232323;
  top: -90%;
}

.text {
  font-family: helvetica;
  position: relative;
  -webkit-text-stroke: 5px #232323;
  transform: rotate(-20deg);
  font-size: 8em;
  font-weight: 800;
  background: -webkit-linear-gradient(#ebce2c, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  top: -60%;
  left: 5%;
}

.flip-card {
  background-color: transparent;
  width: 260px;
  height: 400px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

.flip-card-front {
  z-index: 2;
  transform: rotateY(0deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.