Cubes animés en CSS CSS21

Cet exercice consiste à créer un cube à l’aide des transformations 3D puis de l’animer et enfin de le personnaliser.

Consignes de l’exercice

Préparation de l’exercice

Créez un dossier racine.

Créez une nouvelle page html dans le dossier racine.

Créez une nouvelle feuille de styles css dans le dossier racine.

Associez la feuille de styles à la page html.

Création du cube

Vous pouvez essayer de créer le cube par vous-même sans suivre les consignes ou alors vous faire guider étape par étape. L’objectif étant d’avoir le résultat suivant :

Aperçu du cube initial

HTML : Créez un conteneur <div> avec 6 <div> enfants .

HTML : Ajoutez des classes permettant d’identifier le cube et les 6 faces, puis les différentes faces entre elles.

CSS : Dimensionnez les faces afin de les rendre carré et ajoutez leur une bordure.

CSS : Pour ne pas travailler à “plat” et afin de pouvoir mieux visualiser les étapes de construction du cube, ajoutez au cube une transformation de 20deg sur l’axe X et sur l’axe Y.

Pensez à ajouter au cube la propriété transform-style: preserve-3d ; sans laquelle le cube sera seul dans son espace 3D avec des faces qui resteront en 2D.

CSS : Positionnez les différentes faces du cube en utilisant des transformations 3D (translate et rotate).

Animation de démonstration du positionnement des faces

Animation du cube

CSS : Ajoutez un effet d’animation au cube pour le faire tourner.

Animation du cube

Personnalisation du cube

HTML & CSS : Créez une copie de votre cube initial et appliquez-lui la présentation suivante :

Cube avec faces colorées

HTML & CSS : Créez une copie de votre cube initial et appliquez-lui la présentation suivante :

Cube aplati avec image

HTML & CSS : Créez une copie de votre cube initial et appliquez-lui la présentation suivante :

Cube vide avec contenu

HTML & CSS : Créez une copie de votre cube initial et appliquez-lui la présentation suivante :

Cube dé à jouer

Animations complémentaires

HTML & CSS : En partant du cube, reproduisez approximativement l’animation suivante :

Cube qui explose

HTML & CSS : En partant du cube, reproduisez approximativement l’animation suivante :

Cubes imbriquées

HTML & CSS : En partant du cube, reproduisez approximativement l’animation suivante :

Cube creux