<p>我正在嘗試創建一個 CSS 動畫，該動畫從左向右水平移動，同時看起來越來越近和越來越遠，模擬從前面看轉盤盤上的玻璃的運動。 </p> <p>我已經接近了，但它看起來仍然不正確，目前看起來它沿著菱形而不是圓形移動。 </p> <p>這是我試過的..</p> <p> <pre class="brush:css;toolbar:false;">.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); } }</pre> <pre class="brush:html;toolbar:false;"><div class="roll"></div></pre> </p>

.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>