如何实现模拟转盘玻璃杯的CSS左右缩放动画（修正菱形轨迹问题）

你当前的动画轨迹呈菱形，原因是关键帧采用了非均匀的分段线性变化，结合cubic-bezier曲线导致位移和缩放的联动关系不符合圆周运动的投影规律。要模拟正面视角下转盘托盘上玻璃杯的运动，需要让水平位移和缩放分别遵循正弦曲线和余弦曲线（对应圆周运动的X轴投影与Z轴深度变化），以下是两种可行方案：

方案一：使用CSS三角函数（现代浏览器支持） #

利用CSS原生三角函数实现平滑的圆周运动参数映射，代码简洁且效果精准：

.roll {
  display: block;
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px auto;
  /* 匀速动画，匹配圆周运动的匀速特性 */
  animation: roll 2s linear infinite;
}

@keyframes roll {
  from {
    /* X位移：50% * sin(θ)，θ从0°到360°，对应左右移动范围 */
    /* 缩放：0.8 + 0.2*cos(θ)，对应从1（最近）到0.6（最远）的平滑变化 */
    transform: translateX(calc(50% * sin(0deg))) scale(calc(0.8 + 0.2 * cos(0deg)));
  }
  to {
    transform: translateX(calc(50% * sin(360deg))) scale(calc(0.8 + 0.2 * cos(360deg)));
  }
}

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

方案二：多关键帧近似（兼容旧浏览器） #

如果需要兼容不支持CSS三角函数的浏览器，可通过均匀分布的关键帧模拟正弦/余弦曲线的变化：

.roll {
  display: block;
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px auto;
  animation: roll 2s linear infinite;
}

@keyframes roll {
  0%, 100% {
    transform: translateX(0%) scale(1);
  }
  12.5% {
    transform: translateX(35.35%) scale(0.88);
  }
  25% {
    transform: translateX(50%) scale(0.8);
  }
  37.5% {
    transform: translateX(35.35%) scale(0.72);
  }
  50% {
    transform: translateX(0%) scale(0.6);
  }
  62.5% {
    transform: translateX(-35.35%) scale(0.72);
  }
  75% {
    transform: translateX(-50%) scale(0.8);
  }
  87.5% {
    transform: translateX(-35.35%) scale(0.88);
  }
}

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

核心原理说明 #

转盘上的玻璃杯做圆周运动，正面视角下：

• 水平位移对应圆周运动的X轴投影，需遵循正弦曲线（sin(θ)）
• 缩放大小对应玻璃杯与观察者的深度距离，需遵循余弦曲线（cos(θ)）
• 使用linear动画曲线保证运动匀速，匹配圆周运动的物理特性

内容的提问来源于stack exchange，提问作者Glen Keybit