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.

Afficher la solution HTML

Solution HTML :

<div class="cube">
    <div class="face face-avant"></div>
    <div class="face face-bas"></div>
    <div class="face face-droite"></div>
    <div class="face face-gauche"></div>
    <div class="face face-haut"></div>
    <div class="face face-arriere"></div>
</div>

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

Afficher la solution CSS

Solution CSS :

.face {
    width: 100px;
    height: 100px;
    border: 2px solid #ff23e2;
}

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.

Afficher la solution CSS

Solution CSS :

.cube {
    transform: rotateY(-10deg) rotateX(-10deg);
    transform-style: preserve-3d;
}

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

Animation de démonstration du positionnement des faces
Afficher la solution CSS

Solution CSS :

.face-avant {
    transform: translateZ(50px);
}
.face-arriere {
    transform: rotateY(180deg) translateZ(50px);
}
.face-droite {
    transform: rotateY(90deg) translateZ(50px);
}
.face-gauche {
    transform: rotateY(-90deg) translateZ(50px);
}
.face-haut {
    transform: rotateX(90deg) translateZ(50px);
}
.face-bas {
    transform: rotateX(-90deg) translateZ(50px);
}

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

Sauf mention contraire*, l'article Cubes animés en CSS [CSS21] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

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.