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

iOS 26.2 disponible en version finale : toutes les nouveautés de cette mise à jour pas si anodine

12/12/2025 à 21:38

• 35


watchOS 26.2 est disponible avec un score de sommeil qui n’est plus dans la lune

12/12/2025 à 21:38

• 10


macOS 26.2 disponible pour tous : découvrez les nouveautés lumineuses de cette mise à jour

12/12/2025 à 19:35

• 8


iPhone, Mac : Le VPN premium à petit prix que tout le monde s'arrache avant Noël (parfait si vous avez raté le Black Friday) 📍

12/12/2025 à 16:33

• 0


Orange, Bouygues Telecom et SFR s'allient pour éviter les débranchements sauvages de fibres optiques

12/12/2025 à 16:00

• 27


Fin de l’exception douanière en Europe : les petits colis taxés 3 € dès juillet 2026

12/12/2025 à 15:30

• 47


Promos : les caméras de surveillance reviennent à leur prix du Black Friday

12/12/2025 à 15:20

• 15


HomePad : Face ID et profils, le hub domotique d’Apple se dévoile

12/12/2025 à 12:30

• 19


Avec le code XMAS40, le MacBook Air M1 16 Go passe à 589 € !

12/12/2025 à 11:27

• 0


La Fnac offre à ses adhérents des bons d’achat sur tous les produits Apple, même en promotion

12/12/2025 à 10:57

• 23


Free TV ne fonctionne pas toujours avec Starlink

12/12/2025 à 10:55

• 19


BuhoLaunchpad reproduit fidèlement l’ancien Launchpad de macOS, pour les amateurs

12/12/2025 à 09:36

• 30


Déstockage de bracelets Apple à partir de 15 € !

12/12/2025 à 09:32

• 24


NordVPN veut nettoyer vos courriels des liens malveillants

12/12/2025 à 08:39

• 12


Le Time célèbre les bâtisseurs de l’IA, Apple absente de la photo

12/12/2025 à 07:30

• 106


GPT-5.2, partenariat avec Disney : OpenAI fait feu de tout bois pour insister sur sa supériorité

11/12/2025 à 20:45

• 32