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); } } 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Jika anda mahumenghidupkan 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);} }Sila ambil perhatian bahawa anda perlu menggunakan
transform-style:preserve-3d;(Maklumat lanjut tentang MDN)