Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Appliquer la Mise à l'Échelle et la Rotation | Transformation des éléments avec CSS
Techniques CSS Avancées

bookDéfi : Appliquer la Mise à l'Échelle et la Rotation

Tâche

Créer une carte de boutique en ligne attrayante pour des produits électroniques, où chaque carte comprend une image, un nom et un prix. L'objectif est d'améliorer l'aspect visuel en intégrant les animations suivantes :

  1. Agrandissement de l'image : Utiliser la règle de keyframes increaseImageSize pour ajouter un effet d'agrandissement à l’élément image, le rendant 20% plus grand. Le résultat final doit être scale(1.2).
  2. Rotation du prix : Mettre en œuvre la règle de keyframes rotatePrice pour ajouter un effet de rotation à l’élément prix, effectuant un tour complet. Le résultat final doit être rotate(360deg).

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

index.html

index.html

index.css

index.css

copy
  1. Pour l'animation de mise à l'échelle :
    • Au début (position 0 %), utiliser scale(1) pour conserver la taille d'origine ;
    • Au milieu (position 50 %), augmenter la taille à scale(1.1) ;
    • À la fin (position 100 %), augmenter la taille à scale(1.2).
  2. Pour l'animation de rotation :
    • Au début (position 0 %), maintenir l'angle de rotation à rotate(0deg) ;
    • Au milieu (position 50 %), effectuer une rotation intermédiaire à rotate(180deg) ;
    • À la fin (position 100 %), compléter la rotation avec rotate(360deg).
index.html

index.html

index.css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 4

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.04

bookDéfi : Appliquer la Mise à l'Échelle et la Rotation

Glissez pour afficher le menu

Tâche

Créer une carte de boutique en ligne attrayante pour des produits électroniques, où chaque carte comprend une image, un nom et un prix. L'objectif est d'améliorer l'aspect visuel en intégrant les animations suivantes :

  1. Agrandissement de l'image : Utiliser la règle de keyframes increaseImageSize pour ajouter un effet d'agrandissement à l’élément image, le rendant 20% plus grand. Le résultat final doit être scale(1.2).
  2. Rotation du prix : Mettre en œuvre la règle de keyframes rotatePrice pour ajouter un effet de rotation à l’élément prix, effectuant un tour complet. Le résultat final doit être rotate(360deg).

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

index.html

index.html

index.css

index.css

copy
  1. Pour l'animation de mise à l'échelle :
    • Au début (position 0 %), utiliser scale(1) pour conserver la taille d'origine ;
    • Au milieu (position 50 %), augmenter la taille à scale(1.1) ;
    • À la fin (position 100 %), augmenter la taille à scale(1.2).
  2. Pour l'animation de rotation :
    • Au début (position 0 %), maintenir l'angle de rotation à rotate(0deg) ;
    • Au milieu (position 50 %), effectuer une rotation intermédiaire à rotate(180deg) ;
    • À la fin (position 100 %), compléter la rotation avec rotate(360deg).
index.html

index.html

index.css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 4
some-alt