Ouvrir le menu principal

MacGeneration

Recherche

Du CSS pour faire de la 3D

Arnaud de la Grandière

mardi 09 février 2010 à 11:58 • 28

Ailleurs

skitched


Parce qu'il n'y a pas que le JavaScript dans la vie, Román Cortés a réussi à tirer d'impressionnants résultats de CSS de niveau 1 et 2.1, et HTML, juste en exploitant leurs fonctions à des fins originales. Il a réalisé quelques démos basées sur son implémentation de displacement maps sans la moindre ligne de JavaScript. Le résultat est assez saisissant : une cannette de coca qui roule sur elle-même avec un effet de simili 3D, la même après écrasage, un prisme semi-transparent qui déforme l'arrière plan vu à travers, un tableau de Van Gogh qui prend vie, un effet de transition "rideaux vénitiens", rien qu'en faisant défiler les ascenseurs de la fenêtre, sans mettre à genoux votre machine, et le tout fonctionne quasiment sur tous les navigateurs (y compris sur l'iPhone, veillez cependant à provoquer le défilement avec deux doigts à l'intérieur de la zone active). On peut trouver de nombreux autres effets assez impressionnants sur le blog de Román Cortés.

skitchedLes displacement maps, souvent utilisées en 3D, sont des images en niveaux de gris qui permettent d'indiquer à un moteur de rendu comment déplacer des pixels localement, sans affecter la géométrie de l'objet sur lequel elles sont appliquées. La méthode permet un rendu plus détaillé sans ajouter de polygones aux modèles, ce qui est plus efficace tant en gestion mémoire qu'en vitesse d'exécution. On s'en sert également pour les objets translucides pour affecter la réfraction de la lumière à travers.

Soutenez MacGeneration sur Tipeee

MacGeneration a besoin de vous

Vous pouvez nous aider en vous abonnant ou en nous laissant un pourboire

Soutenez MacGeneration sur Tipeee

Apple Music et Apple TV indisponibles pour certains utilisateurs

10/12/2025 à 21:57

• 9


120 Hz, HDR, A19 : du code laisse entrevoir les caractéristiques du prochain Studio Display

10/12/2025 à 21:00

• 20


Test de l'écran 5K de Japannext : pas de fioritures et un prix intéressant

10/12/2025 à 20:30

• 3


Le détecteur de présence FP300 d’Aqara joue à cache-cache : de nouveau disponible, mais pour combien de temps ?

10/12/2025 à 18:37

• 7


Les États-Unis veulent contrôler les profils des réseaux sociaux des touristes

10/12/2025 à 18:13

• 107


Photoshop s’intègre à ChatGPT, mais ça ne vaut pas le Nano Banana de Google

10/12/2025 à 16:32

• 6


SoundAnchor évite à votre Mac d’utiliser le mauvais micro

10/12/2025 à 14:54

• 5


Oubliez Google : le véritable rival d’OpenAI pour Sam Altman, c’est Apple

10/12/2025 à 14:27

• 68


Bons plans : les ampoules, serrures et autres objets connectés toujours au prix du Black Friday

10/12/2025 à 14:24

• 7


La folie des bilans de l’année : même ma voiture propose son « wrapped »

10/12/2025 à 10:50

• 19


Un écran nomade 15" USB-C/HDMI pour moins de 100 €

10/12/2025 à 10:40

• 0


Pénurie de mémoire : des fabricants de PC s’apprêteraient à augmenter leurs prix

10/12/2025 à 10:03

• 25


Apple et les analystes miseraient sur un lancement réussi du premier iPhone pliant à l’automne 2026

10/12/2025 à 08:59

• 24


Google Maps se met enfin à niveau : Plans et Waze faisaient déjà ça en 2016

10/12/2025 à 07:14

• 82


Pebble lance l’Index 01, la bague qui note ce que votre cerveau oublie

10/12/2025 à 06:30

• 34


Jeff Williams en route pour le conseil d’administration de Disney

10/12/2025 à 05:57

• 9