Les cubes CSS sont une bonne démonstration de l’évolution de CSS ces dernières années, depuis les simples directives relatives aux couleurs et aux dimensions du début jusqu’au langage actuel nous permettant de créer des visuels profonds et créatifs. Ajoutez-y l’animation et vous avez un travail abouti.

Jusqu’à présent, les tutoriels que j’ai trouvés pour créer des cubes en CSS sont longs et mélangent un peu tout, alors j’ai décidé d’écrire cet article qui vous donnera les infos basiques pour créer ce cube. Pour l’idée, je me suis basé sur cette belle réalisation de Mircea Georgescu :

voir CSS only spinning cubes by Mircea Georgescu CodePen

Voir la démo de David Walsh

Le HTML

L’élément cube, qui est un container, sera lui-même enveloppé dans une autre div.

//HTML
<div class="wrap">
	<div class="cube">
		<div class="front">front</div>
		<div class="back">back</div>
		<div class="top">top</div>
		<div class="bottom">bottom</div>
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
</div>

Chaque face du cube aura son propre élément. Comme vous pouvez l’imaginer, CSS va faire un travail de fou pour le disposer comme il faut.

Le CSS

Procédons pas à pas, en prenant chaque élément significatif. Le premier élément à avoir du sens est le container de l’animation — il fournira une perspective CSS pour l’élément en 3D :

.wrap {
	perspective: 800px;
	perspective-origin: 50% 100px;
}

La perspective en CSS est très bien expliquée par MDN, je ne répèterai pas leur présentation, mais pour mieux comprendre la perspective, je vous recommande de jouer avec les valeurs de la propriété perspective et de voir comment cela affecte la démo. Passons maintenant au container du cube qui contiendra toutes les faces :

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

Le cube aura 200px de large, il aura un positionnement relatif de façon à ce que les faces positionnées absolument restent dans les limites. Nous allons aussi utiliser preserve-3d pour que notre élément reste en 3D. Avant d’entrer dans le détail des règles relatives aux faces, nous appliquons quelques styles généraux à chaque face :

.cube div {
	position: absolute;
	width: 200px;
	height: 200px;
}

Maintenant que nous avons déterminé la position et les dimensions des faces, nous pouvons ajouter les transformations des faces individuelles :

.back {
	transform: translateZ(-100px) rotateY(180deg);
}
.right {
	transform: rotateY(-270deg) translateX(100px);
	transform-origin: top right;
}
.left {
	transform: rotateY(270deg) translateX(-100px);
	transform-origin: center left;
}
.top {
	transform: rotateX(-90deg) translateY(-100px);
	transform-origin: top center;
}
.bottom {
	transform: rotateX(90deg) translateY(100px);
	transform-origin: bottom center;
}
.front {
	transform: translateZ(100px);
}

Les valeurs de rotateY font pivoter les faces pour montrer le texte à l’angle voulu, tandis que le translateZ déplace les éléments d’avant en arrière à l’intérieur de l’empilement. translateY est peut-être encore confus pour vous, mais considérez qu’il permet d’élever ou d’abaisser une face pour montrer l’effet 3D à travers les panneaux transparents. Chaque face a ses propres réglages de translation qui la place au bon endroit, là encore je vous conseille de jouer avec ces valeurs pour voir à quoi cela correspond pour chacune.

Voir la démo

Rotation horizontale du cube

Évidemment, à quoi servent tous ces éléments 3D s’il n’y a pas d’animation ? Réponse : à rien. Alors, voici les étapes qu’il nous reste à franchir pour animer notre cube horizontalement :

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

.cube {
	animation: spin 5s infinite linear;
}

Sans doute plus simple que vous ne l’imaginiez, pas vrai ? Le texte apparaît comme il faut grâce à la rotation que nous avons implémentée au départ, et j’ai utilisé une animation keyframe au cas où nous voudrions ajouter des choses plus sexy à l’avenir.

Rotation verticale du cube

Pour faire tourner le cube verticalement, il suffit de changer l’animation en prenant l’axe des Y, pas vrai ? Eh bien, malheureusement non. Les panneaux, tels qu’ils sont actuellement, montreraient le texte à l’envers dans certains cas, donc il nous faut revoir la rotation de certains éléments.

@keyframes spin-vertical {
	from { transform: rotateX(0); }
	to { transform: rotateX(-360deg); }
}

.cube-wrap.vertical .cube {
	margin: 0 auto; /* keeps the cube centered */

	transform-origin: 0 100px;
	animation: spin-vertical 5s infinite linear;
}

.cube-wrap.vertical .top {
	transform: rotateX(-270deg) translateY(-100px);
}

.cube-wrap.vertical .back {
	transform: translateZ(-100px) rotateX(180deg);
}

.cube-wrap.vertical .bottom {
	transform: rotateX(-90deg) translateY(100px);
}

...et il nous faut bien sûr changer l’animation.

Aplatir le cube

Pour supprimer l’aspect 3D du cube et simplement afficher un bloc à chaque fois, supprimez la perspective et l’origine du container :

.wrap {
	/* suppression de la perspective */
	perspective: none;
	perspective-origin: 0 0;
}

Maintenant, seule une face s’affiche.

Voir la démo

J’espère que cet article a suffisamment simplifié la façon dont un cube 3D est constitué en CSS et qu’il vous aura donné envie de créer les vôtres. Et ne vous découragez pas si vous rencontrez des problèmes, ça m’est arrivé également ! J’espère voir bientôt ce que vous aurez inventé !