Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Astuce CSS : un cube photo

En utilisant les transformations géométriques, implémentées depuis CSS3, il est possible de réaliser facilement un cube photos. Et avec les animations de le mettre en mouvement.

Un cube d'images.

Les transformations sont vraiment magiques : voici comment réaliser un cube de photos. Cet exemple fait appel aux possibilités de la propriété transform pour réaliser les transformations 3D, et aux animations (voir la propriété animation).

Cube en CSS - Face avant Cube en CSS - face du haut Cube en CSS - Face gauche

Mettre le cube en mouvement.

Peut-on faire tourner le cube ? Oui c'est tout à fait possible, à condition de définir un mouvement de rotation avec @keyframes... et de fournir trois images supplémentaires pour les faces cachées du cube.

Cube en CSS - Face avant Cube en CSS - Face du haut Cube en CSS - Face gauche Cube en CSS - Face de droite Cube en CSS - Face du bas Cube en CSS - Face arrière

Améliorer le mouvement.

Pour obtenir un mouvement plus varié, plus capricieux, nous allons définir trois rotations (une sur chacun des axes) et imbriquer trois div les uns dans les autres, chacun recevant une des animations. En choisissant pour les durées d'animation des nombres premiers entre eux, et des fonctions non linéaires pour la dynamique des mouvements (comme ease), on peut obtenir un effet global pseudo-aléatoire.

On peut encore améliorer le réalisme en ajoutant un effet de perspective, ce qui va nécessiter encore un div supplémentaire.

Cube en CSS - Face de devant Cube en CSS - Face du haut Cube en CSS - Face de gauche Cube en CSS - Face de droite Cube en CSS - Face du bas Cube en CSS - Face de derrière

Une variante.

Variante du cube CSS - Face avant Variante du cube CSS - Face en haut Variante du cube CSS - Face gauche Variante du cube CSS - Face droite Variante du cube CSS - Face en bas Variante du cube CSS - Face arrière