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 :

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 du cube

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

Personnalisation du cube

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

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

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

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

Animations complémentaires

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

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

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

 

Cela peut vous intéresser :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.