How to expand the sides of a cube while it rotate? - html

Question

I want to expand the sides of a cube while it rotate like in this pen.
I have tried to create a cube that will spin along x axis but while doing so I want it to also expand its sides after some duration.
Below is my code...
.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>
The above code will rotate along x axis. It is fine. Along with that, say after 3s or so, I want the cube to rotate slowly and expand along the sides... How can I do it? Could someone help me with this?

Answer 1

This might sound like a stupid answer.. but the answer is actually already in the Codepen that you provided yourself.
In case you're unfamiliair with sass/codepen.
In codepen you can select the dropdown icon and choose for view copiled css
I would suggest to copy the already existing code and then customize it to your own needs.
You could also fork the pen and change it in the codepen environment.