Как расширить стороны куба, пока он вращается?

Question

Я хочу расширить стороны куба, пока он вращается, как в этой ручке .

Я попытался создать куб, который будет вращаться вдоль оси x, но при этомпоэтому я хочу, чтобы он тоже расширил свои стороны через некоторое время.

Ниже мой код ...

.wrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.cube-wrap {
  width: 40px;
  height: 40px;
  -webkit-perspective: 2000px;
  -webkit-perspective-origin: 50% -500px;
}

.single-box {
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #60c2ef;
  -webkit-transform: rotateY(45deg) translateZ(-200px) rotateX(15deg);
  -webkit-transform-origin: 50% 50% 0;            
}

.box {
  -webkit-transform-style: preserve-3d;
  -webkit-animation: rotate 1.5s infinite linear;
}

.side-front { 
  background-color: blue;
  -webkit-transform: translateZ(20px);
}

.side-back { 
  background-color: blue;
  -webkit-transform: rotateY(180deg) translateZ(20px);
}

.side-top {
  background-color: blue;
  -webkit-transform: rotateX(90deg) translateZ(20px);
}

.side-bottom { 
  background-color: blue;
  -webkit-transform: rotateX(-90deg) translateZ(20px); 
}

.side-left { 
  background-color: blue;
  -webkit-transform: rotateY(-90deg) translateZ(20px); 
}

.side-right { 
  background-color: blue;
  -webkit-transform: rotateY(90deg) translateZ(20px); 
}

@-webkit-keyframes rotate {
  0% { -webkit-transform: rotateY(0); }
  100% { -webkit-transform: rotateY(360deg); }
}

<div class="wrapper">
    <div class="cube-wrap">
        <div class="box">
            <div class="single-box side-back"></div>
            <div class="single-box side-top"></div>
            <div class="single-box side-bottom"></div>
            <div class="single-box side-left"></div>
            <div class="single-box side-right"></div>
           <div class="single-box side-front"></div>
       </div>
    </div>
</div>

Приведенный выше код будет вращаться вдоль оси x. Это хорошо. Наряду с этим, скажем, через 3 с или около того, я хочу, чтобы куб медленно вращался и расширялся по бокам ... Как я могу это сделать? Может ли кто-нибудь помочь мне с этим?

Answer 1

Это может звучать как глупый ответ ... но ответ на самом деле уже находится в Codepen, который вы предоставили сами.

На случай, если вы не знакомы с sass / codepen. В codepen вы можете выбрать значок выпадающего меню и выбрать для просмотр скопированного css

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