Неверно отображается блок с цыфрой

Всем привет, создаю простенький дизайн адаптивного таймера, с перелистыванием цифр.

Не получается отобразить цифру, которая находится за пределами видимости основной цифры. То есть когда вращается на циферблате цифра, то на обратной стороне будет видна другая цифра, которая находится в доп. блоке, но ее не видно (вообще странно отображается, с каким-то перескоком). Вроде все верно настроил с трансформациями.

Ссылка на онлайн редактор: https://playcode.io/effect_skin_timer

.container {

  margin-top: 100px;

  margin-left: 200px;

}

/* Цыфра */

.item-number {

  position: relative;

  font-size: 25vw;

  color: #dedede;

/*  background-color: #3a3a3a;*/

  display: inline-block;

  text-shadow: 2px 2px 10px black;

}

.item-number:after {

  position: absolute;

  content: "";

  width: 100%;

  border-bottom: 1px solid black;

  left: 0;

  top: calc(50% - 1px);

  z-index: 5;

}

.item-number .sub-item-before {

  position: absolute;

  z-index: 1;

  perspective: 800px;

  transform-style: preserve-3d;

}

.item-number .sub-item-active {

  position: relative;

  perspective: 800px;

  z-index: 2;

  transform-style: preserve-3d;

}

.item-number .sub-item-active .sub-item-up { 

  transform-style: preserve-3d;

}

.item-number .sub-item-active .sub-item-up .front {

  backface-visibility: visible;

}

.item-number .sub-item-active .sub-item-up .back {

  backface-visibility: hidden;

  background-color: #3a3a3a;

  transform: scale(1, -1) translateY(-50%);

}

.item-number .sub-item-up, 

.item-number .sub-item-down {

  position: relative;

  overflow: hidden;

  background-color: #3a3a3a;

  transition: transform 1s;

}

.item-number .sub-item-up {

    transform-origin: bottom;

    margin-top: -120%;

    clip-path: polygon(100% 50%, 0 50%, 0 100%, 100% 100%);

}

.item-number .sub-item-down {

    margin-bottom: -120%;

    transform-origin: top;

    clip-path: polygon(100% 0, 0 0, 0 50%, 100% 50%);

}

.item-number .front {

  position: absolute;

  z-index: 10;

}

 

.item-number .back {

  position: relative;

}

.item-number .sub-item-up .front,

.item-number .sub-item-up .back {

  transform: translateY(50%);

  background-color: #3a3a3a;

}

.item-number .sub-item-down .front,

.item-number .sub-item-down .back {

  transform: translateY(-50%);

  background-color: #3a3a3a;

}

 

.item-number:hover .sub-item-active .sub-item-up {

  transform: rotateX(-180deg);

}

 

@media screen and (min-width: 500px) {

  .item-number {

     font-size: 18vw;

  }

}

<div class="container">

  <div class="item-number">

    <div class="sub-item-before">

      <div class="sub-item-up">

        <div class="front">4</div>

        <div class="back">3</div>

      </div>

      <div class="sub-item-down">

        <div class="front">4</div>

        <div class="back">3</div>

      </div>

    </div>

    <div class="sub-item-active">

      <div class="sub-item-up">

        <div class="front">5</div>

        <div class="back">4</div>

      </div>

      <div class="sub-item-down">

        <div class="front">5</div>

        <div class="back">4</div>    

      </div>

    </div>

  </div>

</div>