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.
Ajouter ce site dans Google News

Avec cet adaptateur, votre iPhone devient un outil de diagnostic auto !

08/09/2026 à 21:00

• 0


L’Apple Watch prête à en découdre avec Oura et Whoop ?

08/09/2026 à 20:58

• 5


iOS 27 approche, mais commencez par installer iOS 26.6.2 pour éviter une déconvenue

08/09/2026 à 20:41

• 12


L’iPhone Ultra serait en préparation depuis dix ans, poussé notamment par Tim Cook

08/09/2026 à 20:41

• 32


Test du chargeur Ugreen Nexode Pro 160 W : écran, Wi-Fi, câble rétractable… la surenchère assumée

08/09/2026 à 20:30

• 12


Apple a racheté Sonera, spécialiste des capteurs neuronaux non invasifs

08/09/2026 à 16:54

• 9


TV LG : des failles permettent d’écouter la pièce même écran éteint 🆕

08/09/2026 à 16:46

• 98


Dacia casse de nouveau les prix : la nouvelle Spring peut débuter sous 12 000 € en France 🆕

08/09/2026 à 14:55

• 59


Google prévient que son moteur de recherche va se dégrader en Europe

08/09/2026 à 14:42

• 47


La Suisse prépare un plan B open source face à Microsoft 365

08/09/2026 à 11:41

• 66


Logitech présente le MX Keypad, un pavé de commandes pour l’IA (et tout le reste)

08/09/2026 à 10:24

• 10


iPhone 18 Pro : prix, design, photo, puce… le grand récap des dernières rumeurs avant le keynote

08/09/2026 à 08:32

• 29


Ubiquiti lance des packs Wi-Fi maillés plus accessibles pour la maison

08/09/2026 à 08:12

• 58


La RAM devrait « seulement » augmenter de 13 à 18 % au troisième trimestre

08/09/2026 à 07:10

• 12


Emmanuel Macron veut offrir à la France son « Cannes du jeu vidéo »

08/09/2026 à 06:39

• 62


Apple Watch Ultra 4 : le point sur les nouveautés attendues avant sa présentation

08/09/2026 à 06:38

• 20