<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;">&lt;div class="roll"&gt;&lt;/div&gt;</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>