Comment faire un cube 3D qui tourne en CSS

Comment faire un cube 3D qui tourne en CSS
Photo by teleterapia.fi / Unsplash

Le CSS permet de créer des effets de transformation en 3D très impressionnants, comme par exemple un cube 3D qui tourne. Voici comment faire un cube 3D qui tourne en CSS :

Créez une structure HTML avec 6 divs pour les faces du cube. Chaque div doit avoir une class unique (par exemple "face-avant", "face-arrière", etc.) qui va être utilisée pour appliquer les styles CSS. Voici un exemple de structure HTML pour un cube 3D :

<div class="cube">
  <div class="face face-avant">Avant</div>
  <div class="face face-arrière">Arrière</div>
  <div class="face face-gauche">Gauche</div>
  <div class="face face-droite">Droite</div>
  <div class="face face-haut">Haut</div>
  <div class="face face-bas">Bas</div>
</div>
HTML

Appliquer les styles CSS pour transformer le cube en 3D. Utilisez les propriétés "transform" et "translate3d" pour positionner les faces du cube dans l'espace 3D. Voici un exemple de styles CSS pour transformer le cube en 3D :

.cube {
  position: relative;
  transform-style: preserve-3d;
  width: 200px;
  height: 200px;
  perspective: 1000px;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  color: white;
  text-align: center;
  font-size: 24px;
}

.face-avant {
  transform: translate3d(0, 0, 100px);
  background-color: red;
}

.face-arrière {
  transform: rotateY(180deg) translate3d(0, 0, 100px);
  background-color: green;
}

.face-gauche {
  transform: rotateY(-90deg) translate3d(0, 0, 100px);
  background-color: blue;
}

.face-droite {
  transform: rotateY(90deg) translate3d(0, 0, 100px);
  background-color: yellow;
}

.face-haut {
  transform: rotateX(90deg) translate3d(0, 0, 100px);
  background-color: purple;
}

.face-bas {
  transform: rotateX(-90deg) translate3d(0, 0, 100px);
  background-color: orange;
}
CSS

Ajoutez une animation pour faire tourner le cube. Utilisez la propriété "animation" pour définir une animation qui fait tourner le cube. Vous pouvez spécifier la durée de l'animation, le nombre de tours et la vitesse de rotation en utilisant les valeurs "duration", "iteration-count" et "timing-function". Voici un exemple de styles CSS avec une animation qui fait tourner le cube toutes les 5 secondes :

.cube {
  position: relative;
  transform-style: preserve-3d;
  width: 200px;
  height: 200px;
  perspective: 1000px;
  animation: spin 5s linear infinite;
}

@keyframes spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
CSS

Personnalisez l'animation. Vous pouvez personnaliser l'animation en modifiant la vitesse de rotation et le nombre de tours. Vous pouvez également ajouter des étapes intermédiaires à l'animation en utilisant les valeurs "from" et "to" pour définir l'état de départ et l'état final, et en utilisant des valeurs de pourcentage pour définir les étapes intermédiaires. Voici un exemple d'animation avec des étapes intermédiaires :

@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
CSS

En utilisant ces astuces, vous devriez être en mesure de créer un cube 3D qui tourne de manière fluide et attrayante en CSS. N'hésitez pas à explorer et à expérimenter pour créer des effets encore plus impressionnants !

Avant
Arrière
Gauche
Droite
Haut
Bas