Animasi CSS yang kelihatan lebih dekat dan lebih jauh dari kiri ke kanan, mensimulasikan pergerakan fasad kaca pada meja putar

Question

Saya cuba mencipta animasi CSS yang bergerak secara mendatar dari kiri ke kanan sambil kelihatan lebih dekat dan jauh, mensimulasikan pergerakan kaca pada plat meja putar apabila dilihat dari hadapan.

Saya semakin hampir, tetapi ia masih kelihatan tidak betul, pada masa ini ia kelihatan seperti bergerak mengikut bentuk berlian dan bukannya bulatan.

Ini yang saya cuba..

.roll {
  paparan: blok;
  lebar: 100px;
  ketinggian: 100px;
  latar belakang: merah;
  jidar: 10px auto 10px auto;
  animasi: gulung 2s cubic-bezier(0.42, 0, 0.58, 1) tak terhingga;
}

@keyframes roll {
  0%,
  100% {
    transform: translateX(0%) skala(1);
  }
  20% {
    transform: translateX(50%) skala(0.8);
  }
  50% {
    transform: translateX(0%) skala(0.6);
  }
  80% {
    transform: translateX(-50%) skala(0.8);
  }
}

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

Answer 1

Jika anda mahu menghidupkan segi empat sama pada bulatan mendatar dan menghadapkan ia menghadap penonton, anda boleh menggunakan transformasi 3D pada elemen pembalut dan terbalikkannya pada segi empat sama supaya ia kekal menghadap penonton.

Intinya adalah untuk memutarkan elemen pada paksi Y seperti "dalam kehidupan sebenar".
Berikut adalah contoh:

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

Sila ambil perhatian bahawa anda perlu menggunakan transform-style:preserve-3d; (Maklumat lanjut tentang MDN)