Как сделать плавный переход анимации трехмерного куба при нажатии на одну из граней?

Question

Мне нужно убедиться, что при нажатии на одну из граней куб плавно вращается с этой гранью, и анимация останавливается. А когда вы закрываете лицо, размер постепенно уменьшается и анимация продолжается. Может, кто-то сделал что-то подобное и поделится примером?

Теперь сделано только для ТОП. Но как сделать плавную анимацию, я не могу себе представить.

document.addEventListener("DOMContentLoaded", function() {

  let cube = document.querySelector('#D3Cube');
  let side1 = document.querySelector('#side1');
  let closeBtn = document.querySelector('.closeLink');

  cube.addEventListener('mouseover', function(){
    cube.style.animationPlayState = "paused";
  });
  cube.addEventListener('mouseout', function(){
    cube.style.animationPlayState = "running";
  });

  side1.addEventListener('click', function(){
    cube.classList.remove("animatCube");
    cube.classList.add("animateTop");
  });
  closeBtn.addEventListener('click', function(){
    cube.classList.remove("animateTop");
    cube.classList.add("animatCube");
});


});

#wrapD3Cube {
    width: 500px;
    height: 500px;
    margin: 200px auto;
}
#D3Cube {
    width: 300px;
    height: 300px;
    top: 50px;
    transform-style: preserve-3d;

    margin: auto;
    position: relative;
    transform-style: preserve-3d;
}

.animatCube{
  animation: cube 5s linear infinite;
  transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
}
.animateTop{
  transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) scale3d(1.5, 1, 1.5);
}

@keyframes cube {
  100%  {  transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);	}
}
#D3Cube > div {
  position: absolute;
  transition: all 0.5s linear;
  width: 300px;
  height: 300px;
  float: left;
  overflow: hidden;
  opacity: 0.85;
}
#side1 {
  transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(150px);
  background-color: purple;
  backface-visibility:hidden;
}
#side2 {
  transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(150px);
  background-color: #ffaf1c;
  backface-visibility:hidden;
}
#side3 {
  transform: translateX(0px) translateY(0px) translateZ(150px);
  background-color: #58d568;
  backface-visibility:hidden;
}
#side4 {
  transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(150px);
  background-color: #ed3030;
  backface-visibility:hidden;
}
#side5 {
  transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(150px);
  background-color: #1c5ffe;
  backface-visibility:hidden;
}
#side6 {
  transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(150px);
  background-color: #f2f215;
  backface-visibility:hidden;
}

<div id="wrapD3Cube">
  <div id="D3Cube" class="animatCube">
    <div class="slide" id="side1"><a class="closeLink" href="">x</a></div>
    <div class="slide" id="side2">2</div>
    <div class="slide" id="side3">3</div>
    <div class="slide" id="side4">4</div>
    <div class="slide" id="side5">5</div>
    <div class="slide" id="side6">6</div>
  </div>
</div>

Answer 1

При щелчке по лицу вы можете использовать getComputedStyle(cube).getPropertyValue("transform") для получения текущего состояния преобразования при щелчке по лицу.
Затем вы применяете его в свойстве преобразования, чтобы установить это состояние, удаляете анимацию, добавляете класс, чтобы показать лицо (animateTop) и, наконец, удалить встроенное преобразование, которое вы только что установили, чтобы класс вступил в силу.

При возврате к нормальному состоянию вы удаляете встроенный останов animation, некоторые cube анимация будет происходить. Через 5 секунд animateTop будет удалено, затем будет запущена только анимация.

Я также создал две переменные для лучшего контроля: open, чтобы проверить, когда грань открыта или закрыта. И changing для проверки перехода в открытое или закрытое состояние.

let open = false;
let changing = false;

document.addEventListener("DOMContentLoaded", function() {

  let cube = document.querySelector('#D3Cube');
  let side1 = document.querySelector('#side1');

  side1.addEventListener('click', function() {

    if (changing) {
      return;
    }

    if (!open && !changing) {

      open = true;
      changing = true;

      cube.classList.add('open')
      var compTransform = getComputedStyle(cube).getPropertyValue("transform");
      cube.style.transform = compTransform;
      cube.style.animation = 'none';
      cube.classList.add("animateTop");
      setTimeout(function() {
        cube.classList.remove('closed')
        cube.style.removeProperty('transform');
      }, 50);
      setTimeout(function() {
        changing = false;
      }, 1640);

    } else if (open && !changing) {

      open = false;
      changing = true;
      cube.classList.remove('open')
      setTimeout(function() {
        cube.classList.remove("animateTop");
        cube.classList.add('closed')
        changing = false;
      }, 4999);
      cube.style.removeProperty('animation');
    }
  });
});

#wrapD3Cube {
  width: 500px;
  height: 500px;
  margin: 200px auto;
}
#D3Cube {
  width: 300px;
  height: 300px;
  top: 50px;
  transform-style: preserve-3d;
  margin: auto;
  position: relative;
  transform-style: preserve-3d;
  transition: 1.64s;
}
#D3Cube.closed:hover {
  animation-play-state: paused;
  transition: animation 0s;
}
.closeLink {
  color: #f7f7f7;
  background-color: #333;
  font-size: 20px;
}
.animatCube{
  animation: cube 5s linear infinite;
  transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
}
.animateTop{
  transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) scale3d(1.5, 1, 1.5);
}
@keyframes cube {
  100%  {  transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);	}
}
#D3Cube > div {
  position: absolute;
  transition: all 0.5s linear;
  width: 300px;
  height: 300px;
  float: left;
  overflow: hidden;
  opacity: 0.85;
}
#side1 {
  transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(150px);
  background-color: purple;
  backface-visibility:hidden;
}
#side2 {
  transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(150px);
  background-color: #ffaf1c;
  backface-visibility:hidden;
}
#side3 {
  transform: translateX(0px) translateY(0px) translateZ(150px);
  background-color: #58d568;
  backface-visibility:hidden;
}
#side4 {
  transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(150px);
  background-color: #ed3030;
  backface-visibility:hidden;
}
#side5 {
  transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(150px);
  background-color: #1c5ffe;
  backface-visibility:hidden;
}
#side6 {
  transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(150px);
  background-color: #f2f215;
  backface-visibility:hidden;
}

<div id="wrapD3Cube">
  <div id="D3Cube" class="animatCube closed">
    <div class="slide" id="side1"><a class="closeLink" href="">X</a></div>
    <div class="slide" id="side2">2</div>
    <div class="slide" id="side3">3</div>
    <div class="slide" id="side4">4</div>
    <div class="slide" id="side5">5</div>
    <div class="slide" id="side6">6</div>
  </div>
</div>