CSSTricks : Comment faire de la 3D en HTML/CSS

Dans cet article nous allons voir comment créer un colis animé en trois dimensions sans Javascript.

Vous pourrez retrouver cette animation en action sur notre page KMP Agency | E-Commerce .

Comment faire de la perspective

Les langages HTML et CSS ont été conçus pour faire essentiellement de la 2D, il est cependant possible de simuler de la 3D grâce à la perspective.

La propriété `perspective`

La propriété CSS perspective - CSS : Feuilles de style en cascade | MDN permet de définir la distance entre notre plan et l'utilisateur.

.perspective {
  position: relative;
  perspective: 800px;
}

<div class="perspective"></div>

Notre div.perspective est donc à 800px (axe Z) de notre "caméra", c'est l'élément principal de notre perspective.

La propriété `perspective-origin`

La propriété CSS perspective-origin - CSS : Feuilles de style en cascade | MDN détermine notre position par rapport à notre document.

Contrairement à la propriété perspective, ici on défini notre position sur les axes X et Y. Par exemple, pour voir notre objet depuis le dessus, nous pouvons appliquer la propriété de la manière suivante :

.perspective {
  position: relative;
  perspective: 800px;
  perspective-origin: 50% -200px;
}

La propriété `transform-style`

La propriété CSS transform-style - CSS : Feuilles de style en cascade | MDN nous permet de définir si un élément enfant garde la perspective ou si elle ne s'applique plus.

Lorsque la 3D ne s'applique plus, les enfants de cet élément sont placés en fonction du plan du parent.

Par défaut elle ne s'applique plus, donc nous allons créer notre colis en préservant la 3D :

.perspective {
  position: relative;
  perspective: 800px;
}
.box {
  position: relative;
  transform-style: preserve-3d;
}

<div class="perspective">
  <div class="box"></div>
</div>

Les côtés de notre cube

Nous allons créer les 6 côtés de notre cube avec une taille définie. Nous assignons aussi une classe spécifique à chacun pour pouvoir les placer ensuite.

<div class="perspective">
  <div class="box">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
    <div class="side right"></div>
    <div class="side left"></div>
  </div>
</div>

:root {
  --box-size: 100px;
}

.perspective {
  position: relative;
  perspective: 800px;
}

.box {
  position: relative;
  transform-style: preserve-3d;
}
.side {
  position: absolute;
  width: var(--box-size);
  height: var(--box-size);
}

Le placement des côtés

Cette étape est la plus complexe à prendre en main car il faut réussir à visualiser notre plan et ses axes. Il suffit de jouer avec la rotation et la translation pour positionner nos côtés dans le plan en 3D.

:root {
  --box-size: 100px;
}

.back {
  transform: translateZ(calc(var(--box-size) * -1)) rotateY(180deg);
  background-color: #FFD164;
}

.front {
  background-color: #FFD164;
}

.left {
  background-color: #FFC350;
  transform: rotateY(90deg);
  transform-origin: left center;
}

.right {
  background-color: #FFC350;
  transform: rotateY(-90deg);
  transform-origin: right center;
}

.top {
  background-color: #FFE17D;
  transform: rotateX(90deg) translateZ(var(--box-size));
  transform-origin: bottom left;
}

.bottom {
  background-color: #FFE17D;
  transform: rotateX(90deg);
  transform-origin: bottom left;
}

ℹ️ Nous faisons une rotation de 180deg sur notre élément arrière. Sinon, les éléments en 2D présents dessus seraient inversés.

📦 Pour avoir un joli colis, nous jouons avec les nuances de couleurs pour créer une différence de luminosité entre les côtés.

Quelques éléments décoratifs

En utilisant les pseudo-classes ::after et ::before, appliquons des éléments décoratifs pour que notre cube ressemble à un colis.

.front::before {
  content: "";
  position: absolute;
  width: 30%;
  height: 4px;
  background-color: #FFE17D;
  bottom: 5px;
  left: 5px;
}

.front::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 4px;
  background-color: #FFF6D8;
  bottom: 15px;
  left: 5px;
}

.left::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15%;
  height: 20%;
  background-color: #FF8087;
}

.right::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15%;
  height: 20%;
  background-color: #FF8087;
}

.top::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  height: 15%;
  background-color: #FF8087;
}

Un peu d'animation

Animons maintenant notre colis pour bien observer la 3D. Nous utilisons la propriété transform-origin - CSS : Feuilles de style en cascade | MDN pour centrer la rotation de notre colis au centre sur les trois axes.

.box {
  animation: rotate 4s linear infinite;
  transform-origin: calc(var(--box-size) / 2) center calc(var(--box-size) / 2);
}

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