• A la une
  • Catégories
  • Dossiers
  • +

Inspirations et techniques pour intégrateurs : De la 3D en CSS ! #3

par Benjamin SANCHEZle 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 Inspirations et techniques pour intégrateurs : De la 3D en CSS ! #1. 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 proposent à la fin de l'article.

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

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

Paper cube par Benjamin Sanchez

Nous retrouvons donc notre exercice de la semaine dernière. Je vais passer très vite sur le HTML, le CSS, la petite forme centrale ainsi que sur l'effet de fold, car vous n'avez théoriquement pas eu trop de mal à les comprendre (et qu'auto-analyser son travail ressemble un peu trop à de l'autocongratulation, aussi).

See the Pen Paper cube by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

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

Notre deuxième exemple du jour est un livre 3D, avec la couverture pouvant s'ouvrir et se plier.

See the Pen CSS 3D Bending Effect - Page Flip by Fabrizio Bianchi (@fbrz) on CodePen.

RAS niveau Javascript, donc au moins ça c'est fait.

Pour le HTML, pas grand-chose de notable a l'exception de la surabondance de divs imbriquées les unes dans les autres, que vous pourrez retrouver dans #flip lignes 15 a 38.

See the Pen CSS 3D Bending Effect - Page Flip by Fabrizio Bianchi (@fbrz) on CodePen.

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

See the Pen CSS 3D Bending Effect - Page Flip by Fabrizio Bianchi (@fbrz) on CodePen.

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.

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir