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).
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.
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.