Géométrie 3D animée avec CSS3

Jan 29, 2015
UX-REPUBLIC
1 / DE QUOI ON PARLE ?
La 3D pour tout réaliser…

-Dans notre métier d’UX-Scientist (de développeur Front-End star d’UX 🙂 ), nous avons l’habitude de travailler en 2D. Nous connaissons bien ces propriétés CSS3 qui permettent de créer des coins arrondis, des dégradés et autres ombres portées.

Pourtant, au delà de ces effets déjà intéressants, il existe des transitions, des transformations et des animations qui permettent de réaliser uniquement en CSS des choses encore impossibles il y a quelques années.

Ces propriétés sont avant tout elles aussi des propriétés 2D mais leur utilisation donne accès à une troisième dimension pour nos créations.

On peut réaliser beaucoup de choses en 3D. Pour cet article, j’ai choisi de me concentrer sur la géométrie pure, parce que cela me passionne…

Voici donc une présentation assez générale du sujet. Prochainement, je posterai un tutoriel plus complet pour apprendre à créer une forme en 3D.

animated3dsnd

Ces propriétés existent donc depuis 2009, et ont été implémentées en premier lieu par l’équipe Safari / Webkit.

2 / POSSIBILITÉS

– Transitions : avec les transitions on va pouvoir jouer sur les couleurs, les dégradés, les ombres, les longueurs et les changements d’états…
– Transformations : avec les transformations nous réaliserons des transformations dans l’espace, des rotations par exemple.
– Animations : et avec les animations nous animerons (thank you mister obvious) les deux effets précédents

Ces effets peuvent être combinés à loisir pour en créer d’autres plus élaborés.

3 / PERFORMANCES

Les animations réalisées en CSS3 sont extrêmement fluides et simples à implémenter. Tout s’exécute côté client, ce qui veut dire que c’est le navigateur qui prend en charge les calculs (sans l’aide d’un serveur, ce qui était impossible ou presque il y a 1 an).

Pas besoin de javascript non plus. C’est vraiment agréable de pouvoir réaliser de tels effets sans écrire aucun script.

4 / COMMENT ÇA MARCHE

Les transformations 3D sont basées sur les mêmes propriétés que les transformations 2D. ‘transform’ en l’occurence.

D’autres propriétés sont nécessaires pour obtenir l’effet 3D, telles que : ‘perspective’, ‘translate’, ‘rotate’.

– La perspective correspond au point de fuite. Elle représente la distance entre la caméra et la scène (l’internaute et l’écran). Sans perspective, l’impression de 3D n’existe pas.

Les trois angles sont également représentés (X,Y,Z) :

– translateZ éloigne l’élément du centre de la forme 3D,
– translateX décale l’élément sur l’axe horizontal,
– translateY décale l’élément sur l’axe vertical.

– rotateX fait pivoter l’élément sur son axe central horizontal,
– rotateY fait pivoter l’élément sur son axe central vertical.

perspective

6 / COMPATIBILITÉ

Vous pourrez visualiser ce genre d’effets avec Safari, Chrome, Firefox, et Internet Explorer 10.

Browser support sur w3c School

Vous aurez malgré tout besoin parfois d’utiliser des préfixes vendeurs :

-o- pour Opera
-moz- pour Gecko (Mozilla)
-webkit- pour Webkit (Chrome, Safari, Android…)
-ms- pour Microsoft (Internet Explorer)

Les préfixes vendeurs sont nécessaires tant que la spécification W3C du module des transformations 3D n’est pas finalisée.

Afin de permettre le développement progressif et l’implémentation des modules CSS, les éditeurs de navigateurs (vendors) ont la possibilité d’introduire le support de propriétés spécifiques. Cette manière d’opérer est recommandée par le W3C depuis CSS 2.1 et valable pour les versions suivantes. Pour éviter de remplir nos fichiers de règles préfixées, on va pouvoir utiliser SASS ou LESS qui va nous permettre de rendre ceci générique.

polyhedron

8 / EXEMPLES

Pour finir, voici quelques liens pour vous donner des exemples de ce qu’il est possible de réaliser en géométrie 3D, avec le travail de Julien Knebel, ou encore Ana Tudor, mon idole en la matière.

Julien Knebel sur Codepen
Ana Tudor sur Codepen
Encore Ana Tudor sur Codepen

Et enfin, une application que j’ai découverte très récemment, et qui fera peut-être l’objet d’un autre article prochainement tridiv.com

C’est une application qui permet de réaliser des formes en 3D à partir du CSS3. Elle a l’air vraiment bien faite. A tester donc (non compatible avec Firefox).

Emmanuelle GUYOT / UX-Scientist

UX-REPUBLIC est une agence spécialisée en conception centrée utilisateur. Nous sommes également centre de formation agréé. Retrouvez toutes nos formations en UX-DESIGN sur notre site training.ux-republic.com