Le HTML

La structure est simple : un conteneur pour la scène 3D, un élément pour le cube, et six divs pour les faces.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cube 3D en CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="scene">
        <div class="cube">
            <div class="face front"></div>
            <div class="face back"></div>
            <div class="face right"></div>
            <div class="face left"></div>
            <div class="face top"></div>
            <div class="face bottom"></div>
        </div>
    </div>
</body>
</html>

Le CSS

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.scene {
    width: 200px;
    height: 200px;
    perspective: 800px;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate-cube 6s infinite linear;
}

.face {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 255, 0.3);
    border: 2px solid rgba(0, 0, 0, 0.5);
}

.front {
    transform: translateZ(100px);
}

.back {
    transform: translateZ(-100px) rotateY(180deg);
}

.right {
    transform: rotateY(90deg) translateZ(100px);
}

.left {
    transform: rotateY(-90deg) translateZ(100px);
}

.top {
    transform: rotateX(90deg) translateZ(100px);
}

.bottom {
    transform: rotateX(-90deg) translateZ(100px);
}

@keyframes rotate-cube {
    0% {
        transform: rotate3d(0, 1, 0, 0deg);
    }
    100% {
        transform: rotate3d(0, 1, 0, 360deg);
    }
}

Ce qui se passe

perspective: 800px sur .scene crée l’effet de profondeur. Plus la valeur est basse, plus l’effet est prononcé (et déformé).

transform-style: preserve-3d sur .cube dit au navigateur de garder les enfants dans l’espace 3D. Sans ça, les faces s’aplatissent.

Chaque face est positionnée avec translateZ (pour l’éloigner du centre) et rotateX ou rotateY (pour l’orienter). Le cube fait 200px de côté, donc on translate de 100px (la moitié) pour que les faces soient au bon endroit.

L’animation rotate-cube fait tourner le cube sur l’axe Y en 6 secondes.

Pour aller plus loin

  • Changer rotate3d(0, 1, 0, 360deg) en rotate3d(1, 1, 0, 360deg) pour une rotation sur deux axes
  • Mettre du contenu (texte, images) dans les faces
  • Jouer avec les couleurs et l’opacité
  • Ajouter :hover pour contrôler la rotation au survol

Le code est volontairement minimal. À toi de l’adapter. Si tu codes ce genre d’expérimentations à la main, jette un œil à les commandes utiles de Vim - c’est un éditeur fait pour ce type d’itérations rapides.

Démo