Défi : Ajout de Mise à l'Échelle et de Rotation

Tâche

Créez une carte de boutique en ligne attrayante pour l'électronique, où chaque carte comprend une image, un nom et un prix. La tâche consiste à améliorer l'attrait visuel en incorporant les animations suivantes :

1. Image à l'échelle : Utilisez la règle de keyframes increaseImageSize pour ajouter un effet de mise à l'échelle à l'élément image, le rendant 20% plus grand. Le résultat final devrait être scale(1.2).
2. Rotation du prix : Implémentez la règle de keyframes rotatePrice pour ajouter un effet de rotation à l'élément prix, complétant un tour complet. Le résultat final devrait être rotate(360deg).

Utilisez les règles de keyframes prédéfinies.

1. Pour l'animation de mise à l'échelle :
   • Au début (point 0%), utilisez scale(1) pour maintenir la taille originale ;
   • Au milieu (point 50%), augmentez la taille à scale(1.1) ;
   • À la fin (point 100%), augmentez la taille à scale(1.2).
2. Pour l'animation de rotation :
   • Au début (point 0%), gardez l'angle de rotation à rotate(0deg) ;
   • Au milieu (point 50%), faites une rotation à mi-chemin à rotate(180deg) ;
   • À la fin (point 100%), complétez la rotation avec rotate(360deg).