CSS 动画从左到右看起来越来越近和越来越远，模拟转盘盘上玻璃正面的运动

Question

我正在尝试创建一个 CSS 动画，该动画从左向右水平移动，同时看起来越来越近和越来越远，模拟从前面看转盘盘上的玻璃的运动。

我已经接近了，但它看起来仍然不正确，目前看起来它沿着菱形而不是圆形移动。

这是我尝试过的..

.roll {
  display: block;
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px auto 10px auto;
  animation: roll 2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

@keyframes roll {
  0%,
  100% {
    transform: translateX(0%) scale(1);
  }
  20% {
    transform: translateX(50%) scale(0.8);
  }
  50% {
    transform: translateX(0%) scale(0.6);
  }
  80% {
    transform: translateX(-50%) scale(0.8);
  }
}

<div class="roll"></div>

Answer 1

如果您想要在水平面圆上对正方形进行动画处理并使其面向观看者，您可以在包装元素上使用 3D 变换，并在正方形上反转它，使其保持面向观看者.

重点是像“现实生活中”一样在 Y 轴上旋转元素。
这是一个例子：

.wrap {
  width: 100px;
  height: 100px;  
  margin: 50px auto 50px auto;
  animation: roll 2s linear infinite;
  transform-origin: 50% 50% -250px;
  transform-style: preserve-3d;
}
.roll {
  width: inherit;
  height: inherit;
  background: red;
  animation: roll 2s linear infinite reverse;
  transform-origin: 50% 50% 0;
}

@keyframes roll {
  from { transform:  perspective(1200px) rotateY(0deg);}
  to { transform:  perspective(1200px) rotateY(-360deg);}
}

<div class="wrap">
  <div class="roll"></div>
</div>

请注意，您需要使用 transform-style:preserve-3d; (有关 MDN 的更多信息)