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 的更多資訊)