Dans cet exemple, nous allons créer un cube en HTML et CSS grâce à la propriété transform, puis l’animer avec une animation CSS.

Structure HTML

On créé un div contenant le cube, puis un div pour chaque face.

<div class="cube">
  <div class="cube-side">1</div>
  <div class="cube-side">2</div>
  <div class="cube-side">3</div>
  <div class="cube-side">4</div>
  <div class="cube-side">5</div>
  <div class="cube-side">6</div>
</div>

CSS de base

On donne une taille au cube ainsi qu’à ses faces. On centre le numéro sur chaque face et on donne une opacité à 0.5 à chaque face.

.cube {
  width: 100px;
  height: 100px;
  margin: 50px auto;
}

.cube-side {
  width: 100px;
  height: 100px;
  opacity: 0.5;
  font-size: 50px;
  text-align: center;
  line-height: 100px;
}

Superposer les faces

Avec une position: absolute, on superpose les différentes faces.

.cube {
  ...
  **position: relative;**
}

.cube-side {
  ...
  **position: absolute;**
}

<aside> 🤓 Maintenant que la base est en place, nous pouvons passer à la 3D!

</aside>

preserve-3d

On applique une rotation à notre cube, afin de rendre chaque face visible.

Afin que les éléments enfants puissent fonctionner en 3D, on applique la propriété transform-style: preserve-3d

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

Placer les faces

On place chaque face individuellement, en les sélectionnant avec une pseudo-classe de position (nth-child). On donne également une couleur de fond pour les différencier.