🏆 Challenge #N12 · Transform HTML · challenges/N12_transform.html CSS · challenges/css/N12_transform.css


À faire

  • À faire
  • Terminé
  • En cours
  • Incomplet
  • Blocage

Mémo

// Le transform permet d'effectuer une transformation 2D et 3D sur un élément

transform: rotate(180deg); // Défini le degré de rotatation
transform: translate(1rem, -1rem); // Défini le décalage sur l'axe vertical et horizontal
transform: scale(1.25); // Défini la taille de l'élément sur 1.25 fois sa taille (+25%)


transform: rotate(180deg) translate(1rem, -1rem) scale(1.25); // Pour appliquer plusieurs transformations avec la propriété transform, il faut les mettre à la suite

1️⃣ Transformer un élément

La première boîte doit avoir une rotation de 180 degrés, avec une taille réduite de 25%. La deuxième boîte doit avoir un déplacement de -5rem vers la droite et -5rem vers le haut. Toutes ces transformations se font uniquement la propriété transform.

Effectuer ces transformations uniquement lors du hover (cf. #N11 · Hover).

Ajouter une transition lors du hover (cf. #N13 · Transitions).

Lorem ipsum

Lorem ipsum

🎯 Résultat attendu

Résultat attendu

Effectuer ces transformations uniquement lors du hover (cf. #N11 · Hover).

Résultat attendu

Ajouter une transition lors du hover (cf. #N13 · Transitions).

Résultat attendu