CSS animation that looks closer and farther from left to right, simulating the movement of a glass facade on a turntable

Question

I'm trying to create a CSS animation that moves horizontally from left to right while appearing closer and further away, simulating the movement of the glass on a turntable plate when viewed from the front.

I'm getting close, but it still doesn't look right, currently it looks like it's moving along a diamond shape instead of a circle.

This is what I tried..

.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

If you want to animate a square on a horizontal circle and have it face the viewer , you can use a 3D transform on the wrapper element and invert it on the square so that it stays For viewers.

The point is to rotate the element on the Y axis like "in real life".
Here is an example:

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

Please note that you need to use transform-style:preserve-3d; (More information about MDN)