CSS-Animation, die von links nach rechts näher und weiter blickt und die Bewegung einer Glasfassade auf einem Drehteller simuliert

Question

Ich versuche eine CSS-Animation zu erstellen, die sich horizontal von links nach rechts bewegt, dabei näher und weiter entfernt erscheint und so die Bewegung des Glases auf einer Drehtellerplatte simuliert, wenn man sie von vorne betrachtet.

Ich bin nah dran, aber es sieht immer noch nicht richtig aus. Im Moment sieht es so aus, als würde es sich entlang einer Rautenform statt eines Kreises bewegen.

Das habe ich versucht.

.roll {
  Bildschirmsperre;
  Breite: 100px;
  Höhe: 100px;
  Hintergrund: rot;
  Rand: 10 Pixel automatisch 10 Pixel automatisch;
  Animation: roll 2s kubisch-bezier(0,42, 0, 0,58, 1) unendlich;
}

@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 的更多信息)