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

VideoProc Converter AI : un outil IA tout-en-un et accessible pour traiter vos vidéos et images (- 61 %) 📍

09:04

• 0


Sortie de veille : Tim Cook, stop ou encore ?

08:00

• 6


De nombreux tapis de bureau en promotion, pour tous les goûts, même ceux qui aiment les lumières RGB

21/11/2025 à 22:07

• 3


« Far West » des réseaux sociaux selon Macron : le constat est là, mais quelles solutions concrètes ?

21/11/2025 à 22:00

• 49


TeamGroup présente un SSD externe avec bouton d’autodestruction. Si si.

21/11/2025 à 21:00

• 10


Un boule de nöel connectée avec haut-parleur intégré ! 20 € seulement !

21/11/2025 à 20:55

• 0


Choisir son écran professionnel : ce qui compte vraiment 📍

21/11/2025 à 20:50

• 0


Apple fait totalement disparaître Traqués (The Hunt), une série française, de son service Apple TV

21/11/2025 à 19:21

• 90


OVHcloud : un Summit 2025 sous le signe de l’intelligence artificielle

21/11/2025 à 17:01

• 3


OpenAI déploie les conversations de groupe avec ChatGPT dans le monde entier 🆕

21/11/2025 à 16:31

• 15


De nombreux PC Dell et HP privés du codec HEVC, dont la licence est trop onéreuse

21/11/2025 à 16:00

• 18


Black Friday Mac : CyberGhost en méga promo (−83 % + 4 mois offerts), plus pour longtemps 📍

21/11/2025 à 14:34

• 0


Empêcher l'app Jeux de se lancer quand vous pressez le bouton Xbox ou PlayStation sur une manette

21/11/2025 à 12:40

• 22


Fnac : 10 € offerts tous les 100 € d’achat pour les adhérents, y compris sur les produits Apple

21/11/2025 à 10:09

• 13


Le MacBook Air M2 est à son prix le plus bas sur Amazon, avec 16 Go de RAM 🆕

21/11/2025 à 09:40

• 61


Île-de-France : Navigo Annuel et Imagine R sur smartphone au printemps, avant enfin l’arrivée de la carte bancaire ?

21/11/2025 à 09:12

• 61