Rotation de plusieurs objets autour d'un cercle à l'aide de CSS
Dans une tentative de créer une animation dans laquelle plusieurs objets tournent autour d'un cercle, nous avons constaté que un seul objet tourne correctement. Cet article vise à fournir des conseils pour résoudre ce problème afin de garantir que tous les objets souhaités tournent de manière transparente autour du cercle.
Code existant et mise en œuvre
Le code fourni implique un "outCircle " div qui fait office de centre de rotation, et en son sein, un div "rotation" imbriqué contient les objets à animer. À l'aide de l'animation CSS3, le div « rotation » est configuré pour tourner indéfiniment autour du « outCircle ». Cependant, les tentatives d'ajout d'objets supplémentaires dans le div « rotation » entraînent un comportement indésirable.
Solution
Pour résoudre ce problème, une approche basée sur JavaScript est plus adaptée. pour gérer la rotation de plusieurs objets :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Supplémentaire Considérations
De plus, CSS3 peut être utilisé pour configurer le comportement de l'animation :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|
Exemple
1 2 |
|
Cette approche fournit une solution flexible et évolutive pour faire pivoter n'importe quel nombre d'objets autour d'un cercle à l'aide de CSS3 et JavaScript.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!