.container {
  height: 200px;
  position: relative;
  text-align: center;
  display: flex;
  gap: 20px;
}

.nums {
  box-shadow: 0 3px 10px #111;
  border-top: 1px solid #393939;
  display: inline-block;
  height: 200px;
  perspective: 1000px;
  position: relative;
  width: 140px;
}

.nums:before {
  border-bottom: 2px solid black;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: translate3d(0, -1px, 0);
  top: 50%;
  width: 100%;
  z-index: 1000;
}

.nums:after {
  backface-visibility: hidden;
  background: #2a2a2a;
  border-bottom: 1px solid #444444;
  border-top: 1px solid black;
  border-radius: 0 0 5px 5px;
  bottom: 0;
  box-shadow: inset 0 15px 50px #202020;
  color: #eeeeee;
  content: "0";
  display: block;
  font-size: 145px;
  height: calc(50% - 1px);
  left: 0;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  text-align: center;
  text-shadow: 0 1px 2px #333;
  width: 100%;
  z-index: 0;
}

.num {
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  border-radius: 5px;
  font-size: 145px;
  height: 100%;
  left: 0;
  position: absolute;
  transform: rotateX(0);
  transition: 0.6s;
  transform-style: preserve-3d;
  top: 0;
  width: 100%;
}

.num:before,
.num:after {
  backface-visibility: hidden;
  color: #eeeeee;
  display: block;
  height: 50%;
  left: 0;
  overflow: hidden;
  position: absolute;
  text-align: center;
  text-shadow: 0 1px 2px #333;
  width: 100%;
}

.num:before {
  background: #181818;
  border-radius: 5px 5px 0 0;
  box-shadow: inset 0 15px 50px #111111;
  content: attr(data-num);
  line-height: 1.38;
  top: 0;
  z-index: 1;
}

.num:after {
  background: #2a2a2a;
  border-bottom: 1px solid #444444;
  border-radius: 0 0 5px 5px;
  box-shadow: inset 0 15px 50px #202020;
  content: attr(data-num-next);
  height: calc(50% - 1px);
  line-height: 0;
  top: 0;
  transform: rotateX(180deg);
}

/* Animaciones para unidades */
.nums-one .num:nth-of-type(1) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 0s;
  z-index: 10;
}
.nums-one .num:nth-of-type(2) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 1s;
  z-index: 9;
}
.nums-one .num:nth-of-type(3) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 2s;
  z-index: 8;
}
.nums-one .num:nth-of-type(4) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 3s;
  z-index: 7;
}
.nums-one .num:nth-of-type(5) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 4s;
  z-index: 6;
}
.nums-one .num:nth-of-type(6) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 5s;
  z-index: 5;
}
.nums-one .num:nth-of-type(7) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 6s;
  z-index: 4;
}
.nums-one .num:nth-of-type(8) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 7s;
  z-index: 3;
}
.nums-one .num:nth-of-type(9) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 8s;
  z-index: 2;
}
.nums-one .num:nth-of-type(10) {
  animation: num-one 10s infinite ease-in;
  animation-delay: 9s;
  z-index: 1;
}

/* Animaciones para decenas */
.nums-ten .num:nth-of-type(1) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 9s;
  z-index: 10;
}
.nums-ten .num:nth-of-type(2) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 19s;
  z-index: 9;
}
.nums-ten .num:nth-of-type(3) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 29s;
  z-index: 8;
}
.nums-ten .num:nth-of-type(4) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 39s;
  z-index: 7;
}
.nums-ten .num:nth-of-type(5) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 49s;
  z-index: 6;
}
.nums-ten .num:nth-of-type(6) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 59s;
  z-index: 5;
}
.nums-ten .num:nth-of-type(7) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 69s;
  z-index: 4;
}
.nums-ten .num:nth-of-type(8) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 79s;
  z-index: 3;
}
.nums-ten .num:nth-of-type(9) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 89s;
  z-index: 2;
}
.nums-ten .num:nth-of-type(10) {
  animation: num-ten 100s infinite ease-in;
  animation-delay: 99s;
  z-index: 1;
}

@keyframes num-one {
  0% {
    transform: rotateX(0);
    z-index: 50;
  }
  10% {
    transform: rotateX(-180deg);
    z-index: 50;
  }
  90% {
    transform: rotateX(-180deg);
    z-index: 1;
  }
  90.0001% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(0);
  }
}

@keyframes num-ten {
  0% {
    transform: rotateX(0);
    z-index: 50;
  }
  1% {
    transform: rotateX(-180deg);
    z-index: 50;
  }
  90% {
    transform: rotateX(-180deg);
    z-index: 1;
  }
  90.0001% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(0);
  }
}