Découvrez une présentation sur les Transformations 3D très impressionnante faite par Chris Ruppel.
Le CSS3 a quelques propriétés intéressantes mais pourtant sous-utilises (par manque d’applications concrètes ou a cause du support navigateur restreint), comme par exemple les 3D Transform.
Le résultat est une profonde méconnaissance du potentiel et de la puissance de ces possibilités. Pour lutter contre cet état de fait, le Blog du Webdesign a decié de mettre en avant une présentation des transformations 3D CSS de Chris Ruppel.
Envie de voir plus d’exemples ? Ne manquez pas l’article Le Blog Du Webdesign booste l’inspiration des intégrateurs #11, qui vous propose 11 exemples d’utilisation de 3D en CSS !
Cette présentation est une suite de diapositives et d’animations très impressionnantes entièrement faites en CSS (le seul Javascript présent ne sert qu’à lancer les animations et passer les diapositives).
Les images étant plus parlantes que les mots, voila quelques images tirées de la présentation. Je vous conseille d’aller voir sur place, le rendu avec animation est très impressionnant.
Vous pourrez trouver le code source de cette présentation sur Github, ce qui vous permettra de voir comment sont fait les animations et transformations. Le peu de Javascript présent ne sert qu’aux changements de diapositives et l’ajout/supression de classes pour lancer les animations au bon moment.
Si vous ne connaissez absolument pas le Javascript, et aimeriez tout de même déclencher les animations au clavier, voila le peu dont vous avez besoin pour modifier le Javascript :
Le tableau ‘forward’: […] est le seul endroit où vous pouvez toucher des choses, et contient les différentes commandes qui seront effectuées dans l’ordre. Un appui sur gauche où droite = une commande d’effectuer.
scrollTo(‘#ma-div’); est une commande permettant d’aller au slide correspondant à ma-div .
$(‘mon_chemin_css’).toggleClass(‘ma_classe’); permet d’ajouter ou supprimer la classe ma_classe aux éléments correspondant au chemin CSS fournis (par exemple $(‘#s2 .sandbox p’).toggleClass(‘show’); .
Ces instructions JS sont les seules dont vous aurez besoin, tout le reste est pur CSS.
Bon courage dans vos essais, et n’hésite pas à partager vos résultats en commentaires !