Cube tournant en 3D, en CSS

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é pour réaliser les transformations 3D, et aux animations (voir la propriété ).

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 ... et de fournir trois images supplémentaires pour les faces cachées du cube.

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.

Une variante.