Как манипулировать css и управлять одновременной анимацией ключевых кадров с помощью чистого Javascript

Question

У меня возникла пара проблем, когда я пытался создать трехмерную анимацию с помощью ключевых кадров и JavaScript.Я надеюсь на некоторые советы по каждому из них.

Первая проблема в том, что я не могу заставить div сгибаться вертикально снизу вверх, не теряя при этом карты вертикально установленной ориентации фонового изображения.Я могу только поддерживать ориентацию изображения, сгибая divs справа налево.Как правильно выполнить вертикальный изгиб без потери ориентации изображений?

Вторая проблема заключается в управлении анимацией ключевых кадров.Намерение состоит в том, чтобы согнуть карту и выставить лицевую сторону карты для просмотра мышкой вниз и повернуть анимацию, чтобы изящно спрятать ее снова вверх.CSS содержит анимации составных ключевых кадров, которые запускаются одновременно при загрузке страницы, однако, при попытке добавить JavaScript для управления анимацией с помощью функций мыши и мыши;Я получаю нежелательные результаты.

Я создал два класса (.peek и .hidden) для облегчения управления анимацией, но вторая анимация с именем "divBend1", которая активируется из строки № 58, запускается только при загрузке страницы.Его необходимо запускать одновременно с «анимацией divBend0», которая активируется из строки № 22, во время событий мыши как вверх, так и вниз, чтобы раскрыть и скрыть лицо карты.Как лучше всего синхронизировать анимацию вперед и назад?

Буду признателен за любую помощь.

document.getElementById("flip").onmousedown = function() {
  mouseDown()
};
document.getElementById("flip").onmouseup = function() {
  mouseUp()
};

function mouseDown() {
  document.getElementById("flip").classList.remove("peek");
  document.getElementById("flip").classList.add("hidden");
}

function mouseUp() {
  document.getElementById("flip").classList.remove("hidden");
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  background: radial-gradient(#222225, #222222);
  perspective: 1000px;
  margin: 0;
}

#flip {
  /*animation: divBend0 1.5s ease-in-out 1;*/
  /*commented this line out to relinquish control to javascript*/
  height: 450px;
  width: 253px;
  position: absolute;
  left: 45%;
  top: 20%;
  transform: translateZ(0px) rotateX(0deg) rotateZ(0deg) rotateY(-0deg)!important;
  transform-style: preserve-3d;
  transform-origin: 0 200px 0;
}

.peek {
  animation: divBend0 1.5s ease-in-out paused 1;
}

.hidden {
  animation: divBend0 1.5s ease-in-out forwards .5;
  /* playing half the animation, would like to reverse from this point on mouse up */
}

@keyframes divBend0 {
  50% {
    transform: translateZ(0) rotateX(15deg) rotateZ(15deg) rotateY(-50deg);
  }
}

#flip div {
  height: 450px;
  width: 24px;
  position: absolute;
  left: calc(100% - 1px);
  transform-origin: 0% 100%;
  transform-style: preserve-3d;
  background-size: 253px 450px;
}

#flip #front,
#flip #front div {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Card_back_05.svg/1280px-Card_back_05.svg.png);
}

#flip #front>div>div>div>div>div>div>div>div>div>div {}

#flip #back {
  transform: rotateY(.4deg);
  transform-origin: -100% 0;
}


/* avoid pages overlap */

#flip #back,
#flip #back div {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/KS.svg/1920px-KS.svg.png);
}

#flip>div {
  left: 0;
  background-position-x: 0;
}

#flip div>div {
  background-position-x: -23px;
}

#flip div>div>div {
  background-position-x: -46px;
  ;
}

#flip div>div>div>div {
  background-position-x: -69px;
  /* animation: divBend1 1.5s ease-in-out forwards .5 */
  /*uncomment to see results*/
}

#flip div>div>div>div>div {
  background-position-x: -92px;
}

#flip div>div>div>div>div>div {
  background-position-x: -115px;
}

#flip div>div>div>div>div>div>div {
  background-position-x: -138px;
}

#flip div>div>div>div>div>div>div>div {
  background-position-x: -161px;
}

#flip div>div>div>div>div>div>div>div>div {
  background-position-x: -184px;
}

#flip div>div>div>div>div>div>div>div>div>div {
  background-position-x: -207px;
}

#flip div>div>div>div>div>div>div>div>div>div>div {
  background-position-x: -229px;
}


/* the more pieces you have, the smoother the bend is */

@keyframes divBend1 {
  50% {
    transform: rotateY(-13deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

<div id="flip">
  <div id="front">
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="back">
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>