Créez un cube 3D en rotation captivant avec HTML et CSS

Introduction

Dans ce laboratoire (lab), nous allons créer un cube en rotation 3D en utilisant HTML et CSS. Le cube aura six faces de couleurs distinctes et tournera en continu dans l'espace 3D, démontrant ainsi le potentiel des transformations et des animations 3D en CSS. Ce projet constitue une excellente introduction aux capacités 3D de CSS, vous permettant de visualiser comment les éléments peuvent être positionnés et animés dans l'espace tridimensionnel sans avoir besoin de JavaScript.

Créer la structure HTML

Un cube en 3D est composé de six faces : avant, arrière, gauche, droite, haut et bas. Nous devons créer une structure HTML qui nous permette de positionner ces faces dans l'espace 3D.

Ouvrons le fichier index.html dans le répertoire de notre projet et ajoutons le code HTML nécessaire pour créer la structure du cube.

Ouvrez l'éditeur WebIDE en accédant au panneau de l'explorateur de fichiers sur le côté gauche.
Cliquez sur le fichier index.html pour l'ouvrir dans l'éditeur.
Copiez et collez le code HTML suivant dans le fichier :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D Rotating Cube</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="cube">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
        <div class="face right">Right</div>
        <div class="face left">Left</div>
        <div class="face top">Top</div>
        <div class="face bottom">Bottom</div>
      </div>
    </div>
  </body>
</html>

Comprenons cette structure HTML :

Nous commençons par la structure standard d'un document HTML5, y compris les métadonnées et le titre.
Nous établissons un lien vers notre fichier CSS (style.css), que nous allons créer à l'étape suivante.
Dans le corps du document, nous créons une division (div) de conteneur qui centrera notre cube sur la page.
À l'intérieur du conteneur, nous avons une division cube qui deviendra notre objet 3D.
À l'intérieur du cube, nous définissons six divisions, chacune avec la classe face et une classe supplémentaire indiquant sa position (avant, arrière, etc.).
Chaque face contient un texte indiquant sa position pour nous aider à les identifier.

Bouton Go Live

Pour voir votre progression actuelle, recherchez le bouton "Go Live" en bas de l'éditeur WebIDE et cliquez dessus. Cela démarrera un serveur web local et ouvrira un onglet de navigateur affichant votre page. Pour l'instant, vous ne verrez que le texte de chaque face empilé les uns sur les autres car nous n'avons pas encore appliqué de style.

Preview of the 3D cube structure

À l'étape suivante, nous utiliserons le CSS pour transformer ces divisions en faces d'un cube en 3D.

Créer les styles CSS de base

Maintenant que nous avons notre structure HTML, nous devons la styliser pour créer les bases de notre cube en 3D. Dans cette étape, nous allons ajouter le CSS nécessaire pour créer un conteneur pour notre cube et styliser les faces du cube.

Dans l'éditeur WebIDE, cliquez sur le fichier style.css dans le panneau de l'explorateur de fichiers pour l'ouvrir.
Copiez et collez le code CSS suivant dans le fichier :

/* Basic reset and page styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Container styling with perspective */
.container {
  perspective: 1000px;
  /* The perspective property defines how far the object is from the viewer */
  /* A smaller value creates a more intense 3D effect */
}

/* Cube container styles */
.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  /* This tells the browser that child elements should be positioned in 3D space */
}

/* Common styles for all faces */
.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  opacity: 0.9;
}

Comprenons le CSS que nous venons d'ajouter :

Tout d'abord, nous appliquons un réinitialisation CSS de base pour garantir un style cohérent sur tous les navigateurs en définissant les marges et les rembourrages à zéro.
Nous stylisons l'élément body pour centrer notre cube verticalement et horizontalement sur la page en utilisant le modèle de disposition flexbox.
La classe .container inclut la propriété perspective, qui est essentielle pour les effets 3D. Imaginez que cela définit à quelle distance vous vous trouvez du cube. Une valeur de 1000px offre un effet 3D modéré.
La classe .cube définit les dimensions de notre cube (200px × 200px) et utilise transform-style: preserve-3d. Cette propriété est essentielle car elle indique au navigateur que les éléments enfants doivent être positionnés dans l'espace 3D plutôt que d'être aplatis.
La classe .face contient les styles partagés par les six faces :
- position: absolute permet aux faces d'être positionnées dans le même espace
- Chaque face a les mêmes dimensions que le cube (200px × 200px)
- Nous utilisons le modèle de disposition flexbox pour centrer le texte sur chaque face
- Nous ajoutons des bordures blanches et un texte avec une ombre pour une meilleure visibilité

Maintenant, si vous actualisez l'onglet du navigateur "Go Live", vous devriez voir quelques changements, mais les faces sont toujours empilées les unes sur les autres. C'est parce que nous n'avons pas encore positionné les faces dans l'espace 3D. Nous le ferons à l'étape suivante.

CSS code for a 3D cube with basic styling

Positionner les faces du cube dans l'espace 3D

Maintenant, nous devons positionner chaque face du cube dans l'espace 3D. Pour créer un cube, nous devons placer chaque face à une distance égale à la moitié de la largeur du cube (100px) du centre, dans six directions différentes.

Nous allons utiliser les transformations 3D CSS pour y parvenir :

translateZ() déplace un élément vers l'avant ou l'arrière le long de l'axe Z
rotateX() fait pivoter un élément autour de l'axe horizontal X
rotateY() fait pivoter un élément autour de l'axe vertical Y

Ajoutons le CSS pour positionner chaque face :

Dans l'éditeur WebIDE, avec le fichier style.css toujours ouvert, ajoutez le code CSS suivant à la fin du fichier :

/* Position each face of the cube */
.front {
  background-color: #ff8a65; /* Coral */
  transform: translateZ(100px);
  /* Moves the front face 100px towards the viewer */
}

.back {
  background-color: #4fc3f7; /* Light Blue */
  transform: rotateY(180deg) translateZ(100px);
  /* Rotates 180° around Y-axis and moves 100px forward */
}

.right {
  background-color: #81c784; /* Light Green */
  transform: rotateY(90deg) translateZ(100px);
  /* Rotates 90° right around Y-axis and moves 100px forward */
}

.left {
  background-color: #9575cd; /* Purple */
  transform: rotateY(-90deg) translateZ(100px);
  /* Rotates 90° left around Y-axis and moves 100px forward */
}

.top {
  background-color: #ffb74d; /* Orange */
  transform: rotateX(90deg) translateZ(100px);
  /* Rotates 90° upward around X-axis and moves 100px forward */
}

.bottom {
  background-color: #f06292; /* Pink */
  transform: rotateX(-90deg) translateZ(100px);
  /* Rotates 90° downward around X-axis and moves 100px forward */
}

Comprenons ce que ce CSS fait :

Nous donnons à chaque face une couleur de fond différente pour les distinguer visuellement.
Pour chaque face, nous appliquons une transformation spécifique pour la positionner correctement :
- La face avant est simplement déplacée de 100px vers le spectateur le long de l'axe Z.
- La face arrière est tournée de 180° autour de l'axe Y et déplacée de 100px vers l'avant.
- La face droite est tournée de 90° dans le sens des aiguilles d'une montre autour de l'axe Y et déplacée de 100px vers l'avant.
- La face gauche est tournée de 90° dans le sens inverse des aiguilles d'une montre autour de l'axe Y et déplacée de 100px vers l'avant.
- La face supérieure est tournée de 90° vers le haut autour de l'axe X et déplacée de 100px vers l'avant.
- La face inférieure est tournée de 90° vers le bas autour de l'axe X et déplacée de 100px vers l'avant.

Actualisez maintenant l'onglet de votre navigateur pour voir les changements. Vous devriez être en mesure de voir la face avant du cube. Cependant, le cube ne tourne pas encore, vous ne pouvez donc pas voir les autres faces. Nous ajouterons l'animation de rotation à l'étape suivante.

Fonctionnement des transformations 3D :

Lorsque nous appliquons une transformation rotateY(90deg), nous tournons essentiellement l'élément de 90 degrés autour de l'axe Y (axe vertical), le faisant regarder vers la droite.
Après la rotation, lorsque nous appliquons translateZ(100px), nous déplaçons l'élément de 100px vers l'avant dans la direction où il regarde maintenant (qui peut être n'importe quelle direction en fonction des rotations précédentes).
En combinant ces transformations, nous pouvons placer chaque face à la bonne position et orientation pour former un cube.

Cube faces positioned in 3D space

Ajouter une animation pour faire tourner le cube

Notre cube est maintenant correctement construit, mais il est statique. Pour le rendre plus intéressant, nous allons ajouter une animation pour faire tourner le cube en continu dans l'espace 3D.

Les animations CSS nous permettent de créer des mouvements sur les pages web sans utiliser JavaScript. Nous allons définir une animation avec des keyframes (images clés) et l'appliquer à notre cube.

Dans l'éditeur WebIDE, ajoutez le code CSS suivant à la fin de votre fichier style.css :

/* Define the rotation animation */
@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(90deg) rotateY(90deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: rotateX(270deg) rotateY(270deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

/* Apply the animation to the cube */
.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 20s infinite linear;
  /* 20s defines the duration of one complete rotation */
  /* infinite means the animation will repeat forever */
  /* linear means the animation speed is constant */
}

Comprenons ce CSS :

La règle @keyframes définit une animation nommée rotate.
- Elle spécifie à quoi l'élément devrait ressembler à différents stades de l'animation.
- À 0 %, le cube n'est pas tourné.
- À 25 %, le cube a tourné de 90 degrés sur les axes X et Y.
- À 50 %, le cube a tourné de 180 degrés sur les deux axes.
- À 75 %, le cube a tourné de 270 degrés sur les deux axes.
- À 100 %, le cube a effectué une rotation complète de 360 degrés sur les deux axes.
Nous mettons à jour le sélecteur .cube pour appliquer cette animation :
- animation: rotate 20s infinite linear applique l'animation rotate.
- L'animation dure 20 secondes pour une rotation complète.
- Elle se répète indéfiniment.
- La fonction de temporisation linéaire garantit une vitesse de rotation constante.

Actualisez maintenant l'onglet de votre navigateur. Vous devriez voir votre cube tourner en douceur dans l'espace 3D, montrant les six faces colorées au fur et à mesure de sa rotation.

Comprendre les animations CSS :

Les animations CSS se composent de deux éléments : un style qui décrit l'animation et un ensemble de keyframes qui définissent les états de l'animation à différents moments.
La propriété animation est une notation abrégée de plusieurs propriétés d'animation :
- animation-name : Spécifie le nom de la règle @keyframes
- animation-duration : Spécifie combien de temps l'animation devrait prendre pour terminer un cycle
- animation-timing-function : Définit comment l'animation progresse au cours d'un cycle
- animation-iteration-count : Spécifie combien de fois l'animation devrait se répéter

Vous avez maintenant créé avec succès un cube 3D en rotation en utilisant uniquement HTML et CSS. Cet exemple démontre le pouvoir des transformations 3D et des animations CSS pour créer des éléments web visuellement attrayants sans avoir besoin de JavaScript.

Essayez d'expérimenter avec différentes durées d'animation, différents axes de rotation ou même d'ajouter des transformations supplémentaires pour voir comment elles affectent votre cube.

Rotating 3D cube animation preview

Résumé

Félicitations pour avoir terminé le laboratoire (lab) sur le cube 3D en rotation. Dans ce laboratoire, vous avez :

Créé une structure HTML avec six faces pour un cube 3D
Appliqué des styles CSS pour positionner les éléments dans l'espace 3D
Utilisé les transformations 3D CSS pour placer chaque face correctement dans l'espace 3D
Ajouté des animations CSS pour créer un cube en rotation continue

Ce projet vous a introduit à plusieurs concepts CSS importants :

Les transformations 3D CSS (translate, rotate)
La propriété perspective pour les effets 3D
La propriété transform-style pour conserver le positionnement 3D
Les animations CSS avec des keyframes

Ces concepts sont des outils puissants pour créer des interfaces web attrayantes et interactives sans avoir recours à JavaScript. Vous pouvez appliquer ces techniques pour créer divers éléments 3D, des cartes en rotation simples aux modèles 3D complexes.

En tant que prolongement de ce projet, vous pouvez envisager :

D'ajouter des effets de survol pour mettre en pause l'animation lorsque l'utilisateur passe la souris sur le cube
D'ajouter des images ou des contenus plus complexes à chaque face
De créer des chemins d'animation différents en modifiant les keyframes
D'expérimenter avec différentes tailles, couleurs et vitesses de rotation

N'oubliez pas que le CSS moderne est extrêmement puissant pour créer des effets visuels, et de nombreuses animations qui nécessitaient auparavant JavaScript peuvent maintenant être réalisées avec seulement du CSS, ce qui entraîne de meilleures performances et un code plus simple.

Cube 3D en rotation