沿菱形路径的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

您需要继续为前一个 all 添加新的变换，而无需将其更改为具有连续动画。您平移或旋转每个步骤，直到完成所有路径，然后回到初始步骤。

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>