10 superbes projets 3D entièrement construits avec CSS et JavaScript

Le Web a parcouru un long chemin depuis les pages Internet commutées et GeoCities. Les sites Web sont désormais entièrement réactifs et accessibles à partir d'appareils à écran tactile. Mais les navigateurs modernes ont poussé les choses encore plus loin au-delà de la conception Web « traditionnelle ».

Il est possible de créer des effets 3D incroyables dans le navigateur en utilisant uniquement les technologies frontales. Et dans cet article, je présenterai mes projets Web 3D préférés qui montrent à quel point le Web a progressé en quelques décennies.

Boîtes de perspective

Croyez-le ou non, cette animation de boîte a été réalisée avec des transformations CSS3 pures. Les cubes réels sont assez faciles à rendre en utilisant CSS et les couleurs alternées fonctionnent avec différentes classes.

L'animation utilise des animations d'images clés en boucle pour donner l'illusion de ces boîtes rebondissant dans l'espace 3D. En cliquant sur l'un des boutons de perspective dans le coin supérieur droit, vous pouvez même voir ce modèle 3D sous différents angles. Plutôt cool!

Graphique CSS3 pur

Un autre exemple d'animation CSS3 pure est ce graphique à barres créé par Ana Tudor. Il utilise un simple conteneur HTML avec quatre divs internes représentant les quatre côtés de chaque rectangle.

Les barres sont assez faciles à animer à l'aide de CSS3 et elles atteignent toutes des hauteurs variables. Mais la partie la plus impressionnante est la façon dont toute cette animation fait pivoter les angles de vision même lorsque le graphique à barres augmente.

Cela utilise beaucoup de code Sass pour automatiser les animations avec des fonctions de calcul donc c'est un peu technique. Mais si vous essayez d'en savoir plus sur la 3D, c'est un stylo solide dans lequel plonger.

Vision en tunnel

Pour une expérience de navigateur Webkit trippante, jetez un œil à ce tunnel 3D créé avec seulement quelques transformations CSS3 et propriétés Sass.

Les couleurs alternées passent par une boucle Sass for qui alterne la valeur de couleur HSL après une certaine période de temps. Cette boucle donne l'illusion que vous voyagez indéfiniment dans un tunnel de confettis colorés. Plutôt sauvage!

Cela peut ne sembler rien de spécial et ce n'est certainement pas pratique pour un site Web majeur. Mais cela témoigne de tout ce que vous pouvez faire avec un peu de créativité et de connaissances en codage.

iPhone 3D en CSS

L'iPhone 4 offrait un design radicalement nouveau et tout le monde était enthousiasmé par le nouveau smartphone qui tue. Le développeur Jonathan Levaillant a dû vraiment apprécier l'iPhone 4 puisqu'il a recréé le design en pur CSS.

En tant que dispositifs rotatifs, celui-ci est sacrément cool. Il ressemble à un iPhone et la bande extérieure reflète même la lumière avec un dégradé réaliste. L'écran de l'iPhone lit une vidéo mp4 hébergée sur les serveurs d'Apple et il se déforme également correctement en perspective.

Ce qui est le plus insensé à ce sujet, c'est qu'il s'appuie uniquement sur CSS pour tout. Je serai excité dans 10 ans lorsque les iPhones CSS3 purs seront entièrement interactifs dans le navigateur.

Système solaire 3D

La Voie lactée est notre petit coin de l'univers et elle est pleinement représentée dans cet incroyable stylo créé par Julian Garnier.

Il utilise beaucoup de CSS mais la plupart des effets personnalisables reposent sur JavaScript. Cela vous permet de modifier la vitesse, la taille et la distance de différentes planètes.

Vous pouvez même basculer entre la vue 3D et une vue 2D aérienne avec une relative facilité. Parlez d'une utilisation stellaire du développement frontal !

Cubes ombragés

Ces simples cubes ombragés peuvent sembler peu. Ils sont construits en CSS et pivotent automatiquement sur un axe à l'aide d'animations CSS3.

Mais il existe un paramètre interactif où vous pouvez animer les cubes au survol de la souris. C'est vraiment une astuce sympa et elle repose sur quelques techniques CSS rares, notamment les pseudo-classes :hover et :checked ainsi que le tilde(~) selector .

Carrousel CSS 3D

Les carrousels d'images sont parfaits pour présenter des graphiques, des photos et même des vidéos en rotation. Et avec ce carrousel CSS3, vous pouvez amener ces curseurs amusants à un tout autre niveau.

Ce carrousel 3D très basique repose sur des événements de clic pour s'animer entre différents éléments. Le style 3D est étonnamment détaillé et repose uniquement sur le code CSS.

Le seul JavaScript nécessaire ici est de basculer entre les boutons suivant/précédent et d'animer les styles 3D en place. Et c'est en fait quelque chose que vous pourriez utiliser sur un vrai site afin qu'il puisse avoir une utilisation pratique dans la conception Web moderne.

Refroidir le Lion

Voici quelque chose d'un peu moins pratique mais toujours incroyablement amusant à utiliser. Ce rendu de lion 3D par Karim Maaloul utilise Three.js pour créer un jeu amusant où vous pouvez souffler de l'air frais sur un lion en sueur.

Lorsque vous déplacez l'éventail sur la page avec votre curseur, le regard du lion suivra. Ensuite, cliquez simplement pour démarrer le ventilateur motorisé et regardez l'excitation du lion alors que vous envoyez un flux d'air frais dans sa direction.

Le développeur est même allé jusqu'à créer des zones de battement dans la crinière du lion ainsi que des mouvements dans les moustaches.

Ceci est encore un autre exemple détaillé du chemin parcouru par les effets 3D.

Manette NES 3D

Le jeu classique a laissé sa marque sur la génération actuelle de codeurs et vous pouvez le voir avec le contrôleur 3D NES de Johan van Tongeren rendu en pur CSS3.

Cela fonctionne mieux dans les navigateurs Chrome/WebKit, bien qu'il devrait également s'afficher correctement dans Firefox. C'est vraiment plus une expérience pour voir jusqu'où CSS est venu, alors ne vous attendez pas à ce qu'il soit parfait !

Orbites de Kepler

Je ne peux pas imaginer combien de temps il a fallu pour construire ce modèle réaliste d'une trajectoire d'orbite de Kepler. Ce modèle montre le mouvement d'un corps par rapport à un autre dans l'espace, et dans ce cas le développeur Danie Clawson a fait un travail incroyable.

L'ensemble de ce modèle utilise CSS pour les visuels et Three.js pour les effets 3D. Dans le coin supérieur gauche, vous trouverez une boîte d'options dans laquelle vous pouvez modifier de nombreuses variables d'orbite pour affecter la vitesse, la taille et le placement de l'objet.

Vous remarquerez peut-être même que l'objet en orbite utilise une lumière réaliste avec un ombrage basé sur le côté qui pointe vers le soleil. C'est extrêmement impressionnant et il appartient au numéro 1 sur cette liste pour l'immense souci du détail.

J'espère que ces exemples pourront vous inspirer pour en savoir plus sur le développement frontend et peut-être même créer vos propres projets 3D.