J'essaie de créer une animation CSS qui se déplace horizontalement de gauche à droite tout en apparaissant de plus en plus loin, simulant le mouvement du verre sur un plateau tournant vu de face.
Je me rapproche, mais cela ne semble toujours pas correct. Actuellement, on dirait qu'il se déplace le long d'une forme de losange au lieu d'un cercle.
C'est ce que j'ai essayé..
.roll { bloc de visualisation; largeur : 100 px ; hauteur : 100px ; fond : rouge ; marge : 10px auto 10px auto ; animation : lancer 2s cube-bézier(0,42, 0, 0,58, 1) infini ; } @keyframes roulent { 0%, 100 % { transformer : translateX(0%) échelle(1); } 20% { transformer : translateX (50 %) échelle (0,8 ); } 50% { transformer : translateX (0 %) échelle (0,6 ); } 80% { transformation : translateX (-50 %) échelle (0,8 ); } }
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Si vous souhaitezanimer un carré sur un cercle horizontal et le faire face au spectateur, vous pouvez utiliser une transformation 3D sur l'élément wrapper et l'inverser sur le carré pour qu'il reste face au spectateur.
Le but est de faire pivoter l'élément sur l'axe Y comme "dans la vraie vie".
Voici un exemple :
.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);} }Veuillez noter que vous devez utiliser
transform-style:preserve-3d;(Plus d'informations sur MDN)