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 🟥

Ouvrez la console de votre navigateur afin d’avoir des indices sur ce qui se produit. Votre mise en page doit rester en tout temps bien alignée sur les formes pointillés même si la fenêtre est redimensionnée. Étapes La pyramide 🔺 La fleur 🌼 L'abysse 🌊 Le chevron 🔰
Tirez profit de skew  La banderole  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 Le damier  La maison 🏠
Utilise des rotations 3D. Le grand V  Notes de cours 📚