Maîtriser la 3D en CSS pour des formes courbes et souples

Le 18/05/2017

Troisième article de notre dossier sur la 3D en CSS ! Aujourd'hui, attaquons-nous à des formes un peu plus complexes et courbes.

De la 3D en CSS : Les bases

Cet article le troisième d'une série initiée avec l'article Maîtrisez l'art de la 3D en CSS. Si vous ne l'avez pas lu, allez donc y faire un petit tour avant la fin de continuer cet article.

Comme pour tous les dossiers de cette série, nous ne reprendrons pas les bases de l'intégration, et il est important d'avoir de bonnes notions de HTML et CSS.

De plus, l'article d'aujourd'hui étant la suite vraiment très directe de l'article de la semaine dernière De la 3D en CSS : Les bases, je vous conseille vraiment très fortement d'aller le lire et prendre quelques minutes pour réfléchir à l'exercice proposé à la fin de l'article.

Enfin, car le sujet actuelle demande de bien comprendre le concept de recursivite en CSS, je vous conseille très fortement la lecture d'un article dédié au sujet : Comprendre et appliquer la récursivité en CSS

Maintenant que tout est dit, attaquons notre sujet du jour : les formes courbes et souples.

Paper cube par Benjamin Sanchez

Ce qui va nous intéresser ici est la façon dont le cube est construit, et plus spécifiquement la façon dont ".face-top" a été positionnée. Vous pouvez remarquer que dans le HTML, ce dernier est placé dans la face ".face-front".

Quand cette dernière se voit appliquer une rotation, cette même rotation est appliquée à ".face-top", en plus de la sienne propre (cf l'article sur la récursivité en CSS). Cette technique n'a l'air de rien, mais sachez que c'est grace à elle que nous allons pouvoir ruser pour créer des surfaces courbes et/ou souples.

CSS 3D Bending Effect – Page Flip par Fabrizio Bianchi

Comme vous pouvez vous en douter après l'exemple précédent, cela est utilisé avec la récursivité pour permettre de "plier" la page. Chaque div subit une légère rotation, qui se propage en s'amplifiant de plus en plus, chaque div subissant la rotation de tous ses parents en plus de la sienne.

Enfin, passons au CSS. Nous pouvons évidemment trouver une confirmation à notre supposition (vous retrouverez l'animation ligne 51 du CSS).

Notez aussi sur les lignes qui suivent une surabondance de background-position-x. La raison de leur présence est toute simple : la couverture étant composée de très nombreuses "tranches", il fallait bien entendu n'afficher que la bonne portion de l'illustration pour chaque tranche. Il aurait été possible pour cela de découper l'illustration manuellement à travers un outil d'édition d'images, mais cela aurait rendu l'illustration très lourde à changer.

La solution utilisée ici est donc tout simplement d'appliquer la même image de background à chaque div composant la couverture, puis de ne sélectionner que la bonne portion correspondant à chaque tranche, selon le même principe que les sprites CSS.

C'est tout pour aujourd'hui ! La semaine prochaine, nous verrons un exemple d'application de cette technique pour creer un cylindre ainsi qu'une technique tres importante en 3D : l'ombrage.