Transformation - Formes

Pour cet exercice, vous allez devoir recréer des motifs pointillés en déplaçant des blocs de couleurs 🟥🟦🟩 à l’aide de transformations CSS.

Pour chacune des étapes, un Pen de base vous est fourni. Vous n'avez qu'à ajouter du CSS (nul besoin de modifier le HTML ou le JavaScript).

Pour vous simplifier la vie, commencez avec le carré rouge 🟥

Étapes

  1. La pyramide 🔺

  2. La fleur 🌼

  3. L'abysse 🌊

  4. Le chevron 🔰
    Tirer profit de skew.

  5. La banderole 🎗️

  6. Le papillon 🦋
    Tirer profit de la propriété transform-origin. Pour ce faire, vous devez obligatoirement utiliser un translate(-50%, -50%) sur chaque slide.

Bonus

  1. Le damier

  2. La maison 🏠
    Utilise des rotations 3D.

  3. Le grand V

Notes de cours 📚