沿菱形路径的 3D 立方体移动

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>

我正在尝试使3D立方体沿着菱形的路径移动。在菱形的每个角落(其中有 4 个(，它应该旋转 90 度并继续移动。我设法正确完成了一半的动画路径，但在动画的其余部分(50% 之后(发生了某种废话。我做错了什么？

Answer 1

您需要不断向所有前一个转换添加新的转换，而无需将它们更改为具有连续动画。每一步你要么平移，要么旋转，直到你完成所有路径，然后回到最初的路径。

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>