Как сделать плавную анимацию поворота 3d куба при клике на одну из граней?

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;
}
a{
color:#fff;
}

.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

Добавляешь при клики на конкретную сторону конкретный Класс, к Классу в цсс добавляешь нужную анимацию. Аналогично с другими.

БЛОГ НА HUSL

Как сделать плавную анимацию поворота 3d куба при клике на одну из граней?

Ответы (1 шт):