3D cube movement along the rhombus path - html

Question

html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #eaeaea;
}
.stage {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
perspective: 1800px;
transform-style: preserve-3d;
}
.box {
position: absolute;
top: 50%;
left: 50%;
width: 3.75rem;
height: 3.75rem;
transform-style: preserve-3d;
transform: rotateX(-35deg) rotateY(45deg);
}
.box:nth-child(1) {
animation: box 4s linear;
}
.box:nth-child(1) .left {
animation: left-side 4s linear;
}
.box:nth-child(1) .right {
animation: right-side 4s linear;
}
.box .front,
.box .back,
.box .top,
.box .bottom,
.box .left,
.box .right {
position: absolute;
top: 0;
left: 0;
width: 3.75rem;
height: 3.75rem;
transform-origin: center center;
}
.box .front {
background: #665867;
transform: translateZ(1.875rem);
}
.box .back {
background: #665867;
transform: translateZ(-1.875rem);
}
.box .top {
background: #706171;
transform: translateY(-50%) rotateX(90deg);
}
.box .bottom {
background: #423943;
transform: translateY(50%) rotateX(90deg);
}
.box .left {
background: #776778;
transform: translateX(-50%) rotateY(90deg);
}
.box .right {
background: #524652;
transform: translateX(50%) rotateY(90deg);
}
#keyframes box {
0% {
transform: rotateX(-35deg) rotateY(45deg) translateX(-100px);
}
20% {
transform: rotateX(-35deg) rotateY(45deg) translateX(100px);
}
25% {
transform: rotateX(-35deg) rotateY(45deg) translateX(100px) rotateY(90deg);
}
45% {
transform: translateX(100px) rotateX(-35deg) rotateY(135deg) translateX(200px);
}
50% {
transform: translateX(100px) rotateX(-35deg) rotateY(135deg) translateX(200px) rotateY(90deg);
}
70% {
transform: translateX(-100px) rotateX(-35deg) rotateY(225deg) translateX(100px);
}
75% {
transform: translateX(-100px) rotateX(-35deg) rotateY(225deg) translateX(100px) rotateY(90deg);
}
95% {
transform: translateX(0px) rotateX(-35deg) rotateY(315deg) translateX(100px);
}
100% {
transform: translateX(0px) rotateX(-35deg) rotateY(315deg) translateX(-100px) rotateY(90deg);
}
}
<div class="stage">
<div class="box">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
I'm trying to make a 3D cube move along the path of a rhombus. In each corner of the rhombus (there are 4 of them), it should rotate 90 degrees and continue to move. I managed to do half of the animation path correctly, but in the rest of the animation (after 50%) some kind of nonsense occurs. What am I doing wrong?

Answer 1

You need to keep adding a new transformation to all the previous one without changing them to have a continuous animation. Each step you either translate or rotate until you finish all the path and you get back to the initial one.
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #eaeaea;
}
.stage {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
perspective: 1800px;
transform-style: preserve-3d;
}
.box {
position: absolute;
top: 50%;
left: 50%;
width: 3.75rem;
height: 3.75rem;
transform-style: preserve-3d;
transform: rotateX(-35deg) rotateY(45deg);
}
.box:nth-child(1) {
animation: box 4s linear infinite;
}
.box:nth-child(1) .left {
animation: left-side 4s linear;
}
.box:nth-child(1) .right {
animation: right-side 4s linear;
}
.box .front,
.box .back,
.box .top,
.box .bottom,
.box .left,
.box .right {
position: absolute;
top: 0;
left: 0;
width: 3.75rem;
height: 3.75rem;
transform-origin: center center;
}
.box .front {
background: #665867;
transform: translateZ(1.875rem);
}
.box .back {
background: #665867;
transform: translateZ(-1.875rem);
}
.box .top {
background: #706171;
transform: translateY(-50%) rotateX(90deg);
}
.box .bottom {
background: #423943;
transform: translateY(50%) rotateX(90deg);
}
.box .left {
background: #776778;
transform: translateX(-50%) rotateY(90deg);
}
.box .right {
background: #524652;
transform: translateX(50%) rotateY(90deg);
}
#keyframes box {
0% {
transform: rotateX(-35deg) rotateY(45deg);
}
20% {
transform: rotateX(-35deg) rotateY(45deg) translateX(100px);
}
25% {
transform: rotateX(-35deg) rotateY(45deg) translateX(100px) rotateY(90deg);
}
45% {
transform: rotateX(-35deg) rotateY(45deg) translateX(100px) rotateY(90deg) translateX(100px);
}
50% {
transform: rotateX(-35deg) rotateY(45deg) translateX(100px) rotateY(90deg) translateX(100px) rotateY(90deg);
}
70% {
transform: rotateX(-35deg) rotateY(45deg) translateX(100px) rotateY(90deg) translateX(100px) rotateY(90deg) translateX(100px);
}
75% {
transform: rotateX(-35deg) rotateY(45deg) translateX(100px) rotateY(90deg) translateX(100px) rotateY(90deg) translateX(100px) rotateY(90deg);
}
95% {
transform: rotateX(-35deg) rotateY(45deg) translateX(100px) rotateY(90deg) translateX(100px) rotateY(90deg) translateX(100px) rotateY(90deg) translateX(100px);
}
100% {
transform: rotateX(-35deg) rotateY(45deg) translateX(100px) rotateY(90deg) translateX(100px) rotateY(90deg) translateX(100px) rotateY(90deg) translateX(100px) rotateY(90deg);
}
}
<div class="stage">
<div class="box">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>